jQuery 将引用附加到添加的元素答案

【问题标题】：jQuery append reference to added elementjQuery 将引用附加到添加的元素
【发布时间】：2012-09-22 10:18:16
【问题描述】：

我有一个通过 ajax 调用检索的数据集，我正在循环访问该数据集，并为该集中的每个项目附加一个 <li> 到页面上的列表。

如何在每个循环中获取附加的列表项，以便我还可以对其执行单独的操作

var myData = getData();
var list = $('#list');
$.each(myData, function(index, person){
    list.append('<li>'+person.name+'</li>');
    // On the just appended <li> element I want to set the data-person attribute

    //var listitem = ???;
    //listitem.data('person', person);
});

这里有一个小提琴来说明我的问题：http://jsfiddle.net/pcLt7/1/

【问题讨论】：

你不能直接设置吗，list.append('<li data-person="">'+person.name+'</li>');？
@smilledge 这只有在“person”是可序列化的情况下才有效。当它很大时很讨厌。
@Prinzhorn 对不起，我虽然你只是想存储单个字符串属性。对于这样的事情，你可能想看看像 Backbone.js 这样的框架。
@smilledge 我不是 OP。做某事总是有多种方法，而连接数据属性并不是其中一种美的方法。

标签： jquery append dom-manipulation

【解决方案1】：

只需从原始 HTML 创建一个 jQuery 对象，然后附加它

var listitem = $('<li>'+person.name+'</li>');
list.append(listitem);
listitem.data('person', person);

注意：在循环中进行 DOM 操作不是一个好主意。

如果元素的数量很少，那么就使用我的解决方案。如果这可能是数百个元素，您可能希望在添加项目之前在列表上使用 detach 处理分离的节点，然后再次将其添加到 DOM。

不要过早优化。该解决方案使用的代码更少，并且比其他任何解决方案都更具可读性并且运行良好。

【讨论】：

同意。最好构建一个包含所有 <li> 项的字符串，包括 data- 属性，并在完成后将整个内容附加到 paren #list 元素。
但是使用data-attribute就不一样了。您不能在他们的文件中添加参考。
不需要引用，我最初是在构建包含 data-person 属性的元素，但 JSON.stringify 在转义引号时相当脆弱，这会导致很多损坏HTML 属性/元素。你会怎么解决这个问题？
但是使用引用很好。为什么要在服务端对 JSON 进行字符串化，然后在客户端解析，只是为了再次字符串化，让 jQuery 再解析一次？
@Prinzhorn 检查这个小提琴并点击最后一项......这是导致问题的情况，这就是为什么我更喜欢使用数据方法而不是仅仅在字符串中写出数据属性。 jsfiddle.net/kHCFB/1

【解决方案2】：

试试这个

基于Prinzhorn建议（link）：

注意：在循环中进行 DOM 操作不是一个好主意

我已经更改了我的代码.. 现在我将“li”连接到一个字符串中，然后将它们全部添加到列表中

 var list = $('#list');
var str = "";
$.each(myData, function(index, person){
    str += "<li data-person='" + JSON.stringify(person) + "'>"
    + person.name + "</li>";

    // On the just appended <li> element I want to set the data-person attribute

    //var listitem = ???;
    //listitem.data('person', person);
});

list.append(str);

http://jsfiddle.net/pcLt7/2/

【讨论】：

我不喜欢手动序列化我的对象，我宁愿使用 JSON.stringify 但这会导致单引号出现问题（请参阅此处的最后一个列表项：jsfiddle.net/kHCFB/1）

【解决方案3】：

$.each(myData, function(index, person){
    list.append('<li data-person="'+person.name+'"+ data-member="'+person.member+'">'+person.name+'</li>');
});

$('#list li').click(function(){
    var person = $(this).data('person');
    var member = $(this).data('member');
    alert(person + ' is ' + (member ? 'a' : 'no') + ' member');
});

http://jsfiddle.net/gV9RJ/

【讨论】：

【解决方案4】：

一步到位

$.each(myData, function(index, person){
    $('<li/>', {
        text: person.name,
        data: person
      }).appendTo(list);
});

【讨论】：