我想在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对象。您可以$(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"));
});

关于javascript - jQuery data():无法使用jQuery选择器获取存储的数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36244594/

10-12 12:35
查看更多