jQuery data():can't使用jQuery选择器获取存储的数据

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

$.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"));
});

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

$.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；无论使用CCD_ 24还是CCD_。类似地，对于CCD_ 27内的一个CCD_ 26元素；当i达到1 时

jQuery.data( element, key, value )

元件

类型：元件

要与数据关联的DOM元素。

相关内容

最新更新

热门标签：