for循环并多次将<li>添加到<ul>

Question

我知道这应该相对简单，但正在努力让它发挥作用...

我有 3 个 div，其中包含 <li>。
我想遍历我所有的 div，（按类名 .fare-benefits）。
找到只有1个<li>的div。
一旦我循环并找到 div，只有 1 个 <li>，我想在它的父 <li> 中再添加 8 个空的 <li> =20=].

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

"Uncaught TypeError: Cannot read property 'appendChild' of undefined"

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

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 遮蔽了外循环的 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);
        };
    };
};

Answer 2

如评论中所述，您正在重复使用变量 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>

for循环并多次将<li>添加到<ul>

For loop and add <li> to <ul> multiple times

javascript

for-loop

append

appendchild