jQuery data()：无法使用 jQuery 选择器获取存储的数据答案

【问题标题】：jQuery data(): can't get stored data using jQuery selectorsjQuery data()：无法使用 jQuery 选择器获取存储的数据
【发布时间】：2016-03-27 06:38:19
【问题描述】：

我想在 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/

【问题讨论】：

P.S.我知道使用 jquery-latest 链接是一种不好的做法。只是举例。
建议您提供一个可以工作的 jsFiddle
@Itay 好的，我添加了链接

标签： javascript jquery html jquery-data

【解决方案1】：

$.data() 需要一个实际的 DOM 元素作为第一个参数，而不是 jQuery 对象。您可以使用 jQuery 对象$(selector).data()。我建议你改变这个：

$.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】：

你搞砸了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>

【讨论】：

【解决方案3】：

$.data() 需要 DOM 元素，而不是 jQuery 对象。添加[i] 或在$.data(newRow[i], "number", i); 处使用.get(i) 和所有js，其中$.data() 用于引用DOM 元素。

for 循环也存在问题。如果在#myTable中实际上只有一个tr元素和两个td元素，当i到达2时，如果选择器包含i，结果将是undefined，作为最大索引td 元素在克隆的 table 中仍然是 1 ；是否使用$.data() 或.data()。对于#myTable 中的一个tr 元素也是如此；当i 达到1

jQuery.data( element, key, value )

元素

类型：元素

与数据关联的 DOM 元素。

【讨论】：

@coolguy 在#myTable 中实际上只有两个td 元素吗？