配列で指定した文字列を順にクラスに指定する。

お世話になります。
配列で指定した任意の文字列を、html内のdivの上から順にクラス名として格納する方法を教えてください。
わからないなりに試してみたのですが、うまくいきませんでした。

###ソースコード

html
1<head>
2<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
3<script type="text/javascript" src="array.js"></script>
4</head>
5<body>
6    <div>AAA</div>
7    <div>BBB</div>
8    <div>CCC</div>
9    <div>DDD</div>
10    <div>EEE</div>
11    <div>FFF</div>
12    <div>GGG</div>
13</body>

JavaScript
1$(function(){
2    const array = ['xxx', 'yyy', 'zzz'];    
3    $('div').each(function(){
4        for (let i=0; i<array.length; i++){
5            const val = array[i]
6            console.log(val)
7            $(this).addClass(val[i]);
8        }
9    });    
10});

望む結果

html
1<body>
2    <div class="xxx">AAA</div>
3    <div class="yyy">BBB</div>
4    <div class="zzz">CCC</div>
5    <div>DDD</div>
6    <div>EEE</div>
7    <div>FFF</div>
8    <div>GGG</div>
9</body>

現状

html
1<body>
2    <div class="x y z">AAA</div>
3    <div class="x y z">BBB</div>
4    <div class="x y z">CCC</div>
5    <div class="x y z">DDD</div>
6    <div class="x y z">EEE</div>
7    <div class="x y z">FFF</div>
8    <div class="x y z">GGG</div>
9</body>

行動規範の内容に同意します

回答1件

ベストアンサー

2重にループさせているのでおかしくなってます。
array配列の要素数だけ繰り返せばいいだけですので。

js
1$(function(){
2    const array = ['xxx', 'yyy', 'zzz'];    
3    for (let i=0; i<array.length; i++){
4        const val = array[i]
5        console.log(val)
6        $("div").eq(i).addClass(val)
7    }
8});

あるいは、each を使って

js
1$(function(){
2    const array = ['xxx', 'yyy', 'zzz'];   
3    $.each(array, function(i, val) {
4        console.log(val);
5        $("div").eq(i).addClass(val);
6    })
7});