如何循环查询querySelectorAll的子项匹配

Question

I want to update all child nodes of elements that match a certain attribute using querySelectorAll, but when I loop through the children of the current match, it breaks the loop.

For example when I do the following:

 var allElements = document.querySelectorAll("[class]"); for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; element.style.color = "red"; } 

 <div class="test1"> <div>Child 1</div> <div>Child 2</div> </div> <div class="test2"> <div>Child 3</div> <div>Child 4</div> </div> <div class="test3"> <div>Child 3</div> <div>Child 4</div> </div> 

I get all each matching element

But when I then loop through the children of each match I only get the first match.

 var allElements = document.querySelectorAll("[class]"); for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; for (i = 0; i < element.children.length; i++) { var child = element.children[i]; console.log(child) } element.style.color = "red"; } 

 <div class="test1"> <div>Child 1</div> <div>Child 2</div> </div> <div class="test2"> <div>Child 3</div> <div>Child 4</div> </div> <div class="test2"> <div>Child 3</div> <div>Child 4</div> </div> 

Can someone help me understand why this happens and how I get around it? Thank you.

Answer 1

You are using same variable in both loop. Use different

for (j = 0; j < element.children.length; j++) {
    var child = element.children[j];
    console.log(child)
  }

Answer 2

because you have used i variable in both loop so loop key length 2 reset due to children DOM element have 2 length, you should another variable like j in inner loop then work fine

 var allElements = document.querySelectorAll("[class]"); for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; for (var j = 0; j < element.children.length; j++) { var child = element.children[i]; console.log(child) } element.style.color = "red"; } 

 <div class="test1"> <div>Child 1</div> <div>Child 2</div> </div> <div class="test2"> <div>Child 3</div> <div>Child 4</div> </div> <div class="test2"> <div>Child 3</div> <div>Child 4</div> </div> 

Answer 3

var allElements = document.querySelectorAll("[class]");
for (i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    for (i = 0; i < element.children.length; i++) {
        var child = element.children[i];
        console.log(child)
    }

    element.style.color = "red";
}

You reassigned value of i inside the inner for loop.

var allElements = document.querySelectorAll("[class]");
for (var i = 0, j=0; i < allElements.length; i++) {
    var element = allElements[i];

    for (; j < element.children.length; j++) {
        var child = element.children[j];
        console.log(child)
    }

    element.style.color = "red";
}