중첩 된 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 
    }); 
}); 

첫 번째 루프가 제대로 작동하지만 두 번째 도달 할 수 없습니다. 무엇이 잘못 되었나요? 아무도 도와 줄 수 있니?

Answer 1

첫 번째 forEach 콜백 내에서 querySelector을 사용하고 있습니다. 각 요소는 forEach에 사용할 수없는 단일 요소 만 반환합니다. 따라서 querySelectorAll을 콜백 내에 사용하여 NodeList을 얻고 반복합니다. 그렇지 않으면 단일 요소 만있는 경우 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, _) { 

    }); 
});