Question

我不明白为什么这个函数似乎只更新节点列表中的最后一项。我希望函数将指示元素添加到具有子ul元素的所有li元素。该函数查找所有元素，但只有最后一个元素似乎得到更新。

var ulElementsWithChildren = document.querySelectorAll('ul.test>li ul');

var indicator = document.createElement('span');
indicator.innerHTML = '+';

ulElementsWithChildren.forEach(function(item) {
  item.parentElement.appendChild(indicator);

});

HTML

  <ul class="test">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Child Item</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4
    <ul>
      <li>Child Item</li>
    </ul>
  </li>
  <li>Item 5
    <ul>
      <li>Child Item</li>
    </ul>
  </li>
</ul>

JS Fiddle

Answer 1

您创建了一个<span>。

然后将其附加到许多不同的地方。

由于元素只能出现在一个地方，所以每次都会移动它，直到你到达循环结束。

每次循环时都需要创建一个新的范围。

Answer 2

将你的指标声明移到你的foreach中，它会起作用。

示例：

ulElementsWithChildren.forEach(function(item) {
    var indicator = document.createElement('span');
    indicator.innerHTML = '+';
    item.parentElement.appendChild(indicator);
});

您只创建一个span元素。

Javascript NodeList.forEach（）不更新所有找到的项目

2 个答案: