jquery - 使用 foreach 循环打印所有结果

Question

我是 jQuery 新手，我陷入了每个循环。

我正在尝试从带有对象的变量中获取值，当我使用 打印它时alert()，我得到了所有结果。

但是，当我尝试将其打印到 HTML 时，在这种情况下，我只会将最后一个结果打印到 HTML 而不是 3。

$.each(playlist, function(index, item) {
    alert(item.title);
    $('.playlist1').text(item.title);
}); 

Answer 1

实际上，您并没有被困在.each()循环中，而是被困在.text().

.text()用新文本替换当前文本，因此在这种情况下您只会看到最后一个文本。

也许使用.append().

您也可以.text()以这种方式使用：

$('.playlist1').text(function(index, text){
  return text + item.title;
});

假设.playlist1是ulor ol，您可以像这样附加到它：

$('.playlist1').append('<li>'+item.title+'</li>');

Answer 2

您需要使用该append功能而不是text：

$('.playlist1').append(item.title); 

text()用新内容替换元素的内容。 append()将新内容附加到元素的现有内容。

更新

要将每个项目添加为列表项，请执行以下操作：

$('.playlist1').append('<li>' + item.title + '</li>'); 

Answer 3

使用alert会中断脚本的执行，考虑使用console.log()

console.log(item.title);

each 循环的迭代很像 foreach，在这种情况下，i 是迭代器，item 是值

$.each(playlist, function (i, item) {

当您迭代时，您将每个带有“class=playlist1”的元素的文本设置为item.title.

 $('.playlist1').text(item.title);
}); 

虽然语法上没有错，但有一个逻辑错误。也许你可以试试这个：

var fulltext = [];//initialize empty array
$.each(playlist, function (i, item) {
 fulltext.push(item.title);//iterate through playlist and collect titles
}); 
$('.playlist1').text(fulltext.join(" "));//join array with titles with a blank space
                                         //and put them in class playlist1

您可以对列表项执行此操作：

var ul = document.createElement("ul");
$.each(playlist, function (i, item) {
 var thisLi = document.createElement("li");
 thisLi.innerHTML = item;
 ul.appendChild(thisLi);
}); 
$('.playlist1').append(ul);