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

Posted 2023-03-11

【中文标题】For 循环并将 <li> 添加到 <ul> 多次

【英文标题】：For loop and add <li> to <ul> multiple times

【发布时间】：2021-09-29 21:01:21

【问题描述】：

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

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

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

"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>

【问题讨论】：

您在两个循环中都使用了变量名i。为内部循环使用不同的名称。

另外，i < 9 将创建 9 个额外的 LI。使用i < 8创建8个。

你也可以用for...of去掉外部的i

【参考方案1】：

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

【参考方案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);
        ;
    ;
;

【讨论】：

确实，有几种方法可以做到这一点。我只是坚持使用原始代码来展示那里出了什么问题以及如何在几乎没有更改的情况下修复它。虽然是真的，但另一种循环也可以解决它。

非常感谢！ @kelvin Schofs！我写 javascript 已经 2 年多了，这是我第一次遇到这个问题！稍后我还将重构以用于...的。谢谢大家！

我的第一条评论是为了回应 Barmar 的评论，但他似乎删除了它。 @ReenaVerma 记得将最有帮助的答案标记为解决方案。

会的，我必须等待才能“接受”作为答案