javascript - 生成元素和关联 $.data() 的更有效方法？ [jQuery]

Question

我正在寻找一种更有效的方法来生成一些 DOM 更改并更新 .data() 对象。

目前，数据是在一个对象数组中提供的，我正在分段构建字符串，将它们附加到表体，并将 .data 对象添加到元素。

这是一个快照。

for (i in data.users) {
    //Build the string
    var rowData = "<tr class=\"";
        rowData += (i%2) ? "odd":"even";
        rowData +="\">";
            rowData +="<td>";
            rowData +=data.users[i]["FirstName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["LastName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["UserName"];
            rowData +="</td>";
            //Could be many more columns
        rowData +="</tr>";

    //Change the DOM, add to the data object.
    $(rowData).appendTo("#list > table > tbody").data('ID', data.users[i]["ID"]);
}

我最沮丧的是不得不操作 DOM n 次，而不是对所有数据进行一次更改——或者能够像有缓冲区一样释放数据。我还想一次性更新 .data()。

Answer 1

使用 jQuery 1.4.3+，您可以将 data-XXX 属性放入节点中。它由 jQuery 自动选取到该节点的 data() 散列中。

var Buffer = [];
for (i in data.users) {
    //Build the string
    Buffer.push("<tr data-ID=\"" + data.users[i]["ID"] + "\" class=\"");
    Buffer.push((i%2) ? "odd":"even");
    Buffer.push("\">");
    Buffer.push("<td>");
    Buffer.push(data.users[i]["FirstName"]);
    Buffer.push("</td>");
          // and so forth
    Buffer.push("</tr>");        
}

$("#list > table > tbody").append(Buffer.join(''));