Javascript NodeList.forEach() 没有更新所有找到的项目

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() 没有更新所有找到的项目

Javascript NodeList.forEach() not updating all found items

javascript

foreach

nodelist