将 span 附加到相应的 li 元素（Javascript）答案

【问题标题】：Appending span to corresponding li element (Javascript)将 span 附加到相应的 li 元素（Javascript）
【发布时间】：2020-10-18 05:43:37
【问题描述】：

我是 JS 新手，在将跨度附加到正确位置时遇到问题。我有一个包含可选文本输入的清单。当复选框被选中并且文本输入具有值时，我想显示复选框值的文本和文本输入值。如果文本输入为空，我只想显示复选框的值。我试过这个：

    function addBreakfastCheck1(e) {
      e.preventDefault();
      let checkboxes = document.querySelectorAll('input[name="protein"]:checked');
      let servingTexts = document.querySelectorAll('input[name="servingTexts1"]');
      let li;
      let span;
      checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
          li = document.createElement('li');
          li.className = 'list-group-item';
          li.appendChild(document.createTextNode(checkbox.value));
          breakfastResult1.appendChild(li);
        }
      })
    
      servingTexts.forEach(function(servingText) {
        if (servingText && servingText.value) {
          span = document.createElement('span');
          span.appendChild(document.createTextNode(' ' + servingText.value));
          li.appendChild(span)
        }
      })
    }

它将所有文本输入值附加到提交时的最后一个 li 元素。如何让每个 span 附加到相应的 li 元素？

【问题讨论】：

你没有元素叫做：breakfastResult1
我建议您将 HTML 部分添加到您的问题中，并且 - 更好的是 - 给您带来麻烦的整个代码示例

标签： javascript html foreach append

【解决方案1】：

您不需要两个循环。您应该遍历所有复选框（不仅仅是选中的复选框）。 forEach() 将数组索引作为另一个参数发送，您可以使用它来索引文本框以获取相应的值。

function addBreakfastCheck1(e) {
  e.preventDefault();
  let checkboxes = document.querySelectorAll('input[name="protein"]');
  let servingTexts = document.querySelectorAll('input[name="servingTexts1"]');
  checkboxes.forEach(function(checkbox, i) {
    if (checkbox.checked) {
      let li = document.createElement('li');
      li.className = 'list-group-item';
      li.appendChild(document.createTextNode(checkbox.value));
      let servingText = servingTexts[i];
      if (servingText && servingText.value) {
        let span = document.createElement('span');
        span.appendChild(document.createTextNode(' ' + servingText.value));
        li.appendChild(span)
      }
      breakfastResult1.appendChild(li);
    }
  })
}

【讨论】：