3

我有一个通过 ajax 调用检索的数据集，我正在循环访问数据集，并且对于该集中的每个项目，将 a 添加<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/

4

4 回答 4

14

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

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

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

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

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

于 2012-10-01T14:42:18.383 回答
2

尝试这个

基于Prinzhorn的建议（链接）：

注意：在循环中进行 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/

于 2012-10-01T14:46:58.617 回答
1

一口气

$.each(myData, function(index, person){
    $('<li/>', {
        text: person.name,
        data: person
      }).appendTo(list);
});
于 2012-12-22T02:21:13.043 回答
1 
$.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/

于 2012-10-01T14:44:45.650 回答