入れ子になったforEach on querySelectors

Question

私はいくつかのDOM要素にこのforEeachをネストしました。

// get parallax box 
var parallaxBox = document.querySelectorAll('.js-Parallax-Box'); 
// iterate over each parralax box 
[].forEach.call(parallaxBox, function(el, _) { 
    // get parallax elements 
    var parallaxElement = el.querySelector('.js-Parallax-Element'); 
    // iterate over each parallax element 
    [].forEach.call(parallaxElement, function(el, _) { 
      // can't reach this el 
    }); 
}); 

最初のループは正常に動作していますが、2番目のループは間違っていますか？誰でも助けることができますか？

Answer 1

最初のforEachコールバック内でquerySelectorを使用しています。これは、forEachで使用できない単一の要素のみを返します。したがってNodeListを得るためにコールバック内でquerySelectorAllを使用し、反復します。そうでなければ、単一の要素しかない場合、forEachはまったく必要ありません。

var parallaxBox = document.querySelectorAll('.js-Parallax-Box'); 
[].forEach.call(parallaxBox, function(el, _) { 
    var parallaxElement = el.querySelectorAll('.js-Parallax-Element'); 
    //    change here -------^-------- 
    [].forEach.call(parallaxElement, function(el1, _) { 

    }); 
});