Question

For 循环多次添加 <li> 到 <ul>

2021-07-22

1627

javascript for-loop append appendchild

我知道这应该相对简单，但尝试让它工作...

我有 3 个 div，其中包含 <li> 。
我想循环遍历所有 div（按类名 .fare-benefits ）。
查找只有 1 个 <li> 的 div。
循环遍历并找到只有 1 个 <li > 的 div 后，我想向其父级 <ul> 添加另外 8 个空的 <li> 。

出于某种原因，我不断收到以下错误：

“未捕获的类型错误：无法读取属性'appendChild' 未定义"

我在下面创建了我的代码示例。有什么指示吗？

let fareBenefitsDiv = document.querySelectorAll(".fare-benefits");

  for (let i = 0; i < fareBenefitsDiv.length; i++) {
  
    if (fareBenefitsDiv[i].childElementCount === 1) {
      for (let i = 0; i < 9; i++) {
        let createLI = document.createElement("li");
        createLI.classList.add("fare-benefit");
        fareBenefitsDiv[i].appendChild(createLI);
      };
   };
};

.cards {
  border: 1px solid grey;
  width: 300px;
  display: flex;
}

ul {
  list-style: none;
}

.fare-benefit {

  border-bottom: 1px solid grey;
}

<div class="cards">

  <div class="row-1 fare-benefits">
    <ul>
      <li class="fare-benefit">1</li>
    </ul>
  </div>
  
  <div class="row-2 fare-benefits">
    <ul>
        <li class="fare-benefit">1</li>
        <li class="fare-benefit">2</li>
        <li class="fare-benefit">3</li>
        <li class="fare-benefit">4</li>
        <li class="fare-benefit">5</li>
    </ul>
  </div>
  
  <div class="row-3 fare-benefits">
    <ul>
      <li class="fare-benefit">1</li>
      <li class="fare-benefit">2</li>
      <li class="fare-benefit">3</li>
      <li class="fare-benefit">4</li>
      <li class="fare-benefit">5</li>
      <li class="fare-benefit">6</li>
      <li class="fare-benefit">7</li>
      <li class="fare-benefit">8</li>
      <li class="fare-benefit">9</li>
    </ul>
  </div>
  
</div>

Answer 1

正如评论中提到的，您正在重复使用变量 i 。因此，当您使用 fareBenefitsDiv[i].appendChild(createLI); 时，它使用 i 来计算要添加的 <li> 的数量，而不是 DIV 的索引。

您可以使用 forEach 而不是 for 循环来避免此类问题，并简化代码。

代码中的另一个问题是所有 DIV 都只有一个子元素，即 <ul> 。您应该迭代 <ul> 元素并附加到它们，而不是 DIV。

let fareBenefitsUL = document.querySelectorAll(".fare-benefits ul");
fareBenefitsUL.forEach(ul => {
  if (ul.childElementCount === 1) {
    for (let i = 0; i < 8; i++) {
      let createLI = document.createElement("li");
      createLI.classList.add("fare-benefit");
      createLI.innerText = 'x';
      ul.appendChild(createLI);
    };
  };
});

.cards {
  border: 1px solid grey;
  width: 300px;
  display: flex;
}

ul {
  list-style: none;
}

.fare-benefit {
  border-bottom: 1px solid grey;
}

<div class="cards">

  <div class="row-1 fare-benefits">
    <ul>
      <li class="fare-benefit">1</li>
    </ul>
  </div>

  <div class="row-2 fare-benefits">
    <ul>
      <li class="fare-benefit">1</li>
      <li class="fare-benefit">2</li>
      <li class="fare-benefit">3</li>
      <li class="fare-benefit">4</li>
      <li class="fare-benefit">5</li>
    </ul>
  </div>

  <div class="row-3 fare-benefits">
    <ul>
      <li class="fare-benefit">1</li>
      <li class="fare-benefit">2</li>
      <li class="fare-benefit">3</li>
      <li class="fare-benefit">4</li>
      <li class="fare-benefit">5</li>
      <li class="fare-benefit">6</li>
      <li class="fare-benefit">7</li>
      <li class="fare-benefit">8</li>
      <li class="fare-benefit">9</li>
    </ul>
  </div>

</div>

Answer 2

您的问题是内循环的 i 遮盖了外循环的 i 。请先重命名变量或将 div 存储在变量中：

let fareBenefitsDiv = document.querySelectorAll(".fare-benefits");
for (let i = 0; i < fareBenefitsDiv.length; i++) {
    if (fareBenefitsDiv[i].childElementCount === 1) {
        const div = fareBenefitsDiv[i];
        for (let j = 0; j < 9; j++) {
            let createLI = document.createElement("li");
            createLI.classList.add("fare-benefit");
            div.appendChild(createLI);
        };
    };
};