Vanilla JS - 遍歷列表並插入元素會導致無限循環錯誤

Question

我有一個導航菜單，想在每個項目之間添加一個裝飾元素。 在循環之外，當我使用 [0] 定位特定列表項時，我的代碼似乎可以工作，但是當在循環內部使用 [i] 時，頁面永遠不會完成加載。

當我轉移到 JSbin 進行測試時，我遇到了無限循環錯誤。

HTML：

<ul id="menu-mobile-navigation">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Etc</li>
</ul>

JS：

var mobileNav = document.getElementById('menu-mobile-navigation');
var mobileNavChildren = mobileNav.children;

// var decoration = document.createElement('div');
// decoration.classList.add( 'decoration' );
// mobileNav.insertBefore( decoration, mobileNavChildren[0].nextSibling ); // works outside loop


for (var i = 0; i < mobileNavChildren.length; i++) {

  var decoration = document.createElement('div');
  decoration.classList.add( 'decoration' );
  mobileNav.insertBefore( decoration, mobileNavChildren[i].nextSibling ); // page never loads, infinite loop error in JSbin

}

Answer 1

元素的.children返回一個活動的 HTMLCollectio，如果在循環中間添加了元素，即使在迭代它時它也會發生變化：

 var mobileNav = document.getElementById('menu-mobile-navigation'); var mobileNavChildren = mobileNav.children; console.log(mobileNavChildren.length); mobileNav.appendChild(document.createElement('div')); console.log(mobileNavChildren.length);

 <ul id="menu-mobile-navigation"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Etc</li> </ul>

你想要一個 static 集合代替 - 考慮使用querySelectorAll ，或者傳播到一個數組中：

 const mobileNav = document.getElementById('menu-mobile-navigation'); const mobileNavChildren = mobileNav.querySelectorAll('li'); for (var i = 0; i < mobileNavChildren.length; i++) { var decoration = document.createElement('div'); decoration.classList.add( 'decoration' ); mobileNav.insertBefore( decoration, mobileNavChildren[i].nextSibling ); }

 <ul id="menu-mobile-navigation"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Etc</li> </ul>

不過，還要注意<div>不應該是<ul>的子元素 - 只有列表元素應該是<ul>的子元素。