jQuery data（）：無法使用jQuery選擇器獲取存儲的數據
[英]jQuery data(): can't get stored data using jQuery selectors
問題描述
我想在DOM元素（表行）中存儲一些信息。 我想我可以使用jQuery的data()函數來做到這一點。 我寫了一些測試代碼，發現無法使用jQuery選擇器從元素中獲取存儲的數據。 可能嗎？ 也許我做錯了什么？
這是簡單的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery data() test</title>
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<table id="myTable">
<tbody>
<tr id="rowPrototype" style="display:none;">
<td class="td1"></td>
<td class="td2"></td>
</tr>
</tbody>
</table>
<script>
var table = $("#myTable");
for (var i = 0; i < 5; i++) {
var newRow = $("#rowPrototype").clone();
newRow.removeAttr("style");
newRow.removeAttr("id");
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));
var tds = newRow.find("td");
tds.text("test");
table.append(newRow);
}
var trs = table.find("tr");
trs.each(function () {
var tr = $(this).text();
var data = $.data(tr, "number");
console.log("number: " + data);
});
</script>
</body>
</html>
我期望以下輸出：
number: undefined (row prototype)
number: 0
number: 1
number: 2
number: 3
number: 4
但是實際是：
number: undefined
number: undefined
number: undefined
number: undefined
number: undefined
number: undefined
那么這段代碼怎么了？
UPD您可以在這里進行測試： https ： //jsfiddle.net/rfrz332o/3/
3 個解決方案
解決方案1
2 已采納 2016-03-27 06:46:14
$.data()期望將實際的DOM元素作為第一個參數，而不是jQuery對象。 您可以將$(selector).data()與jQuery對象一起使用。 我建議您更改此：
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));
對此：
newRow.data("number", i);
console.log("Data added to row: " + newRow.data("number"));
然后，更改此：
var trs = table.find("tr");
trs.each(function () {
var tr = $(this).text();
var data = $.data(tr, "number");
console.log("number: " + data);
});
對此：
table.find("tr").each(function () {
console.log("number: " + $(this).data("number"));
});
解決方案2
1 2016-03-27 06:42:29
$.data()需要DOM元素，而不是jQuery對象。 在$.data(newRow[i], "number", i);添加[i]或使用.get(i) $.data(newRow[i], "number", i); 以及所有之后的$.data()用於引用DOM元素的js 。
for循環也存在問題。 如果#myTable實際上只有一個tr元素和兩個td元素，當i達到2 ，如果選擇器i被包含，結果將是undefined ，因為在克隆table中td元素的最大索引仍為1 ; 是否使用$.data()或.data() 。 同樣，對於#myTable的一個tr元素； 當i達到1
jQuery.data( element, key, value )元件
類型：元素
與數據關聯的DOM元素。
解決方案3
1 2016-03-27 06:47:17
您搞砸了data方法。 您沒有將數據應用於動態創建的行。 要查看結果，請檢查您的控制台。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery data() test</title> <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script> </head> <body> <table id="myTable"> <tbody> <tr id="rowPrototype" style="display:none;"> <td class="td1"></td> <td class="td2"></td> </tr> </tbody> </table> <script> var table = $("#myTable"); for (var i = 0; i < 5; i++) { var newRow = $("#rowPrototype").clone(); newRow.removeAttr("style"); newRow.removeAttr("id"); newRow.data("number", i); console.log("Data added to row: " + newRow.data("number")); var tds = newRow.find("td"); tds.text("test"); table.append(newRow); } var trs = table.find("tr"); trs.each(function () { var tr = $(this).text(); var data = $(this).data("number") console.log("number: " + data); }); </script> </body> </html>
jQuery選擇器 - “這個”還是“數據”？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.