Question

我想使用querySelectorAll更新与某个属性匹配的元素的所有子节点，但是当我遍历当前匹配的子节点时，它会中断循环。

例如，当我执行以下操作时：

＆＃13;

<div class="combo-box-list open">
          <select name="filter" style="margin-bottom: 0px; display: none;" class="combo-original-element" data-original-id="filter">
                <option selected="selected" value="1">Status</option>
                <option value="2">Type</option>
                <option value="3">Start Date Range</option>
            </select>
</div>

＆＃13;

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

＆＃13;

我得到所有匹配的元素

但是当我接着每场比赛的孩子们循环时，我只得到第一场比赛。

＆＃13;

<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>

＆＃13;

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";
}

＆＃13;

有人可以帮助我理解为什么会这样，以及我如何解决这个问题？谢谢。

Answer 1

您在两个循环中使用相同的变量。使用不同的

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

Answer 2

因为你在两个循环中都使用了i变量所以循环键长2重置由于子DOM元素有2个长度，你应该在内循环中另一个变量如j然后工作细

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";
}

您在内部for循环中重新分配了i的值。

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";
}

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

3 个答案: