如何使用 jQuery $.each 方法输出正确的 HTML？答案

【问题标题】：How do I use the jQuery $.each method to output proper HTML?如何使用 jQuery $.each 方法输出正确的 HTML？
【发布时间】：2011-01-20 05:49:39
【问题描述】：

HTML：

<div id="twitter" style="float:left;">
    <span></span>
</div>

jQuery：

var obj = JSON.parse(data);

$.each(obj.items, function(i, item) {
  $("span", this).html("('<p>" + item.title + "</p>')").appendTo("#twitter");
  if (i == 5) return false;
});

我显然做错了什么，似乎无法弄清楚这一点。我知道 $.each 方法有效，因为我可以输入 alert(item.title) 并获得预期的结果。

基本上我想做的就是循环遍历项目并输出：

<p> title </p>
<p> title 2 </p>

我就是想不通

【问题讨论】：

标签： javascript jquery json each

【解决方案1】：

不知道你的JSON 长什么样，很难说你应该做什么：

$(obj.items).each(function(i,o){
  $("<p>").text(o.title).appendTo("#twitter > span");
  if (i == 5) return false;
});

甚至可能：

for (var i = 1; i <= 5; i++) {
  $("<p>").text(o[i].title).appendTo("#twitter > span");
}

实际上，将段落放在跨标签中有点奇怪。

【讨论】：

第一个示例假定 obj.items 是一个 DOM 对象数组，这似乎不太可能。第二个假设 o.items 是一个数组，这更有可能但没有在问题中明确说明（或代码需要）。
@Shog9：第一种方法不需要它们是 dom 元素。这是一种不太常用的语法，但它适用于 JSON 对象 - jsbin.com/ekovu3
我知道你是对的 - 假设它看起来不像任何其他有效参数，jQuery 会尝试将对象转换为 jQuery 对象，然后 each() 方法只是传递给jquery.each() 以该新对象为目标。但是，这确实要求对象是一个数组（或类似数组的对象）——与$.each() 不同，否则它不会做任何有用的事情。
@Shog9：jQuery 不会转换它，它会检测类型并相应地处理它。您可能需要检查来源。仍然要放弃投票吗？ :)
我在写这篇文章时正在查看源代码 - 这种特殊用途没有记录在案，因此它要么是源代码，要么是作为参考的猜测。如果需要，您可以单步执行并找到对 jQuery.makeArray 的调用，或者只是比较 $.each({one: "blah", two: "bleak"}, function(n,v) { console.log(v) }); 和 $({one: "blah", two: "bleak"}).each(function(n,v) { console.log(v) }); 的结果 - 请注意前者如何循环对象属性，而后者只是将对象附加到新对象jQuery“数组”（然后循环）。

【解决方案2】：

   var obj = JSON.parse(data); 

    $.each(obj.items, function (i, item) { 
        $("<p>" + item.title + "</p>").appendTo("#twitter > span"); 
        if (i == 5) return false; 
    });

【讨论】：

这个。虽然我也建议将
元素嵌套在内可能不是非常明智...
同意...也许 $("" + item.title + "").appendTo("#twitter");
@Shog9 -- 同意，这有点倒退。最好将跨度完全保留并将其附加到 DIV。