Question

我有一个由ajax调用检索的数据集，我循环遍历数据集，并且对于集合中的每个项目，将<li>附加到页面上的列表中。

如何在每个循环中保留附加的listitem，这样我也可以对其执行单独的操作

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/

Answer 1

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

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

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

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

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

Answer 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/

Answer 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/

Answer 4

一次性

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

jQuery追加对添加元素的引用

4 个答案: