如何显示我的 for 循环的每个结果

Question

我正在尝试显示数组的每个元素。我的 for 循环正在运行，但我无法显示循环的每个结果。

function newCaseTemplate(filteredCase, filteredCaseTemplate, tagList) {
  var tagList = "";

  for (var i = 0; i < filteredCase.tags.length; i++) {
    tagList = filteredCase.tags[i].name + " | ";
  }

  var filteredCaseTemplate = `<span class="index-tagsCardCase">${tagList}</span>`

  $("#index-table").append(filteredCaseTemplate);

在此先感谢您的帮助！

Answer 1

使用 console.log 并在浏览器的开发人员工具（Control-Alt-C 或 F12）中查看输出，然后在 select 控制台选项卡中查看输出。

  for (var i = 0; i < filteredCase.tags.length; i++) {
    console.log(filteredCase.tags[i].name);
    tagList += filteredCase.tags[i].name + " | ";
  }

Answer 2

问题是因为您在 for 循环的每次迭代中都覆盖了 tagList，所以当循环完成并且您开始写入 DOM 时，只有最后一个值是显示。

另一种方法是使用 map() 构建一个数组，然后您可以 append()。试试这个：

function newCaseTemplate(filteredCase, filteredCaseTemplate, tagList) {
  var tagList = filteredCase.tags.map(function(tag) {
    return tag.name;
  });

  var filteredCaseTemplate = `<span class="index-tagsCardCase">${tagList.join(' | ')}</span>`;    
  $("#index-table").append(filteredCaseTemplate); 
}

Answer 3

您将在循环的每次迭代中覆盖 tagList。使用 += 添加到前一个字符串。我还添加了一个检查，不要在最后一个标签上添加管道。

for (var i = 0; i < filteredCase.tags.length; i++) {
    if(i === (filteredCase.length - 1)){
        tagList += filteredCase.tags[i].name;
    }else{
        tagList += filteredCase.tags[i].name + " | ";
    }
 }

如何显示我的 for 循环的每个结果

How to display every result of my for-loop

jquery

for-loop

var