document.getElementsByClassNameで取得した要素の子要素を指定したい

Question

前提・実現したいこと

document.getElementsByClassNameで取得した要素の子要素を指定したい。

発生している問題・エラーメッセージ

子要素の指定の仕方が分からず動作しない。

HTML

下記のように文字をspanで囲っており、1文字ずつクラスの付与などをしたい。

<div class="letter"> <span>り</span>　<span>ん</span>　<span>ご</span> </div> <div class="letter"> <span>み</span>　<span>か</span>　<span>ん</span> </div>

該当のソースコード(簡易記述)

複数あるlettrクラスに対して個別の処理がしたいので、for文で処理をします。

var letterElements = document.getElementsByClassName("letter");
for (var i=0; i < letterElements.length; i++) {
letterElements[i].children('span').each(function(i) { //ここで各letterの子要素であるspanを指定したい

//各spanに対してclassを付与するなどの処理をする

}
}

実際のコード

スクロールマジックで1文字ずつ文字を表示させようとしています。
下記の記述だと、全てのletterクラスを指定しているので、想定した動きになりません。

var letterElements = document.getElementsByClassName("letter");
for (var n=0; n < letterElements.length; n++) {
var scene = new ScrollMagic.Scene({
triggerElement: letterElements[n],
triggerHook:0.8,
offset:100,
reverse:false
})
scene.on("enter", function (event) {
$('.letter > span').each(function(i) { //ここでletterElements[n]の子要素のspanを指定したい
$(this).delay(20 * i).queue(function() {
$(this).addClass('visible').dequeue();
});
});
})
.addTo(controller);
}

Comments

[skys215]

$('.letter > span').each(function(i) {　でもう各子要素が取れてるのじゃないですか？

[MMTR]

ご回答ありがとうございます。
取れているのですが、その書き方ですとその時点で全てのlitterクラスの子要素を指定してしまうので、想定した動きになりません。
for文を回して、一つ目のletterクラスの子要素、二つ目のletterクラスの子要素と、個別に指定したいのです。

[skys215]

$('.letter > span:nth-child(1)')
$('.letter > span:nth-child(2)')
で指定できると思います。

[MMTR]

再度ありがとうございます。
すみません、私の質問の仕方が分かりにくかったです。

意味合いとしては、下記の通りとなります。

$('letter').eq(0).children('span')
$('letter').eq(1).children('span')
$('letter').eq(2).children('span')

なので、for文でeq(0)をeq(n)としてみましたが、動作しませんでした。
ScrollMagicの仕様にかかわるものかもれませんので、そちらも今調べております。

Answer 1

こういうことでしょうか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const cn=["ringo","mikan"];
  document.querySelectorAll('.letter').forEach((x,y)=>{
    x.querySelectorAll (':scope > span').forEach(z=>{
      z.classList.add(cn[y]);
    });
  });
});
</script>
<div class="letter">
<span>り</span>　<span>ん</span>　<span>ご</span>
</div>
<div class="letter">
<span>み</span>　<span>か</span>　<span>ん</span>
</div> 

Comments

[MMTR]

返信が遅くなり大変申し訳ございません。
私自身の理解力不足で、上手く質問の趣旨をお伝えしきれていなかったようです。
上記ご回答も参考とさせていただきます。ありがとうございました。

Answer 2

eqはjQueryの関数です。でもfor文が使ってるletterElements[i]はHTML OBjectです。

var letterElements = $(".letter");  //jquery関数を使う
for (var i=0; i < letterElements.length; i++) {
　　　　letterElements[i].find('span:nth-child(1)').each(function(i) 
//或いは　letterElements[i].find('span').eq(1).each(function(i) 

Comments

[MMTR]

返信が遅くなり大変申し訳ございません。
実装したい機能をうまく動かすことは出来ませんでしたが、質問のタイトルにある回答を頂いたとおもいますので、ベストアンサーとさせていただきました。
ありがとうございました。