6

我希望从 ajax 调用返回的数组中创建以下列表。

<ul id="list">
  <li><input type="checkbox" name="rss" value="231" />bla</li>
  <li><input type="checkbox" name="rss" value="321" checked="checked" />ble</li>
  <li><input type="checkbox" name="rss" value="431" />abc</li>
</ul>

以下两种方法都可以（我可能需要调整，但它们很接近。一种方法优于另一种方法吗？有更好的方法吗？谢谢

var l=$("#list");
l.html('');
$(data).each(function(){
  l.append('<li><input type="checkbox" name="rss" checked="'+((this.selected)?'checked':null)+'" value="'+this.id+'" />'+this.channel+'</li>');
  //Or
  l.append($("#rss-clone").clone(true).removeAttr('id').find('input').val(this.id).attr('checked',(this.selected)?'checked':null).parent().text(this.channel));
},'json');

//仅克隆解决方案需要：

<ul class="hidden"><li id="rss-clone"><input type="checkbox" name="rss" value="" />bla</li></ul>
    4

    1 回答 1

    4

    另请参阅：jQuery 和动态元素与显示 css 属性

    要点是动态创建 dom 会增加客户端的开销，而克隆现有 dom 在客户端上速度很快，但需要提前渲染和下载它们的开销。

    没有一个比另一个更好，哪个更适合您取决于您​​的项目；如果您更关心客户端性能而不是每个请求要下载的几个额外字节，那么您最好选择克隆方法。

    然而，据我所知，客户端性能并没有受到任何方法的严重影响，克隆速度稍微快一点，但动态创建元素无论如何都不会慢得可怕。除非您要创建 100 个这样的选择，否则选择可能只是出于品味问题，即哪种对您感觉更好。

    但是需要注意的一点是，除非您需要创建许多非常不同的元素，否则克隆是一种更方便的方法，因为如果标记没有嵌入到您的 JS 代码中，您可以在之后轻松地设置和修改元素的样式。

    于 2012-08-19T13:54:57.460 回答