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）中查看输出，然后选择“控制台”选项卡。

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

Answer 2

问题是因为您在tagList循环的每次迭代中都覆盖for，所以当循环完成并且您要写入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循环的每个结果

3 个答案: