更有效的方式來生成元素並關聯$ .data（）？ [jQuery]

我正在尋找更有效的方式來生成一些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()。

來源

2011-02-08 Incognito

使用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(''));

來源

2011-02-08 20:39:07 jAndy

這正是我想要的。謝謝。解決多次更新DOM的問題和關聯數據的問題。 – Incognito 2011-02-08 20:42:11

我假設數據來自某個服務器端源。你爲什麼不使用類似jqGrid的東西，其中你將從服務器傳遞一個JSON對象（或XML等）（所有操作都在服務器端完成），然後將數據顯示給用戶。 jqGrid generates非常好，你不需要做所有你現在正在做的工作。

來源

2011-02-08 20:32:20 JasCav

看看jquery模板插件..仍處於測試階段，但非常好！ http://api.jquery.com/category/plugins/templates/

來源

2011-02-08 20:36:05 zack

我會投票決定不把這些信息放在DOM中。使用JS模型來管理這些數據，然後根據需要進行查詢。這可以保持DOM整潔，並且正確有效地分離語義標記和支持/驅動它的數據。 MVC ftw！

來源

2013-05-09 18:24:25 Madbreaks

更有效的方式來生成元素並關聯$ .data（）？ [jQuery]

回答

相關問題