jQuery append 对添加元素的引用

Question

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

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

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);
});

这是一个 fiddle 来说明我的问题:http://jsfiddle.net/pcLt7/1/

Answer 1

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

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

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

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

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