Javascript jQuery data（）：can'；t使用jQuery选择器获取存储的数据_Javascript_Jquery_Html_Jquery Data

Javascript jQuery data（）：can'；t使用jQuery选择器获取存储的数据

javascript jquery html

Javascript jQuery data（）：can'；t使用jQuery选择器获取存储的数据,javascript,jquery,html,jquery-data,Javascript,Jquery,Html,Jquery Data,我想在DOM元素（表的行）中存储一些信息。我想我可以使用jQuery的data（）函数来完成。我编写了一些测试代码，发现我无法使用jQuery选择器从元素中获取存储的数据。可能吗？也许我做错了什么下面是简单的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery data() test</title>

我想在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
number: undefined
number: undefined
number: undefined
number: undefined
number: undefined

那么这个代码有什么问题

UPD 您可以在这里测试它：

需要

DOM

元素，而不是jQuery对象。添加

[i]

或在

$处使用.get（i）
获取数据（newRow[i]，“number”，i）

和后面的所有

js

，其中

$.data（）

用于引用

DOM

元素

for

循环也存在问题。如果在

#myTable

中实际上只有一个

tr

元素和两个

td

元素，当

到达

时，如果选择器包含

则结果将是

未定义的，由于克隆的表中td
元素的最大索引仍然是1
；无论是使用$.data（）
还是.data（）
。类似地，对于#myTable
中的一个tr
元素；当i
达到1

jQuery.data（元素、键、值）

元素
类型：元素
要与数据关联的DOM元素
需要DOM
元素，而不是jQuery对象。添加[i]
或在$处使用.get（i）
获取数据（newRow[i]，“number”，i）
和后面的所有js
，其中$.data（）
用于引用DOM
元素
for
循环也存在问题。如果在#myTable
中实际上只有一个tr
元素和两个td
元素，当i
到达2
时，如果选择器包含i
则结果将是未定义的，由于克隆的表中td
元素的最大索引仍然是1
；无论是使用$.data（）
还是.data（）
。类似地，对于#myTable
中的一个tr
元素；当i
达到1

jQuery.data（元素、键、值）

元素
类型：元素
要与数据关联的DOM元素
$.data（）
要求实际的DOM元素作为第一个参数，而不是jQuery对象。您可以使用jQuery对象$（选择器）.data（）
。我建议你改变这一点：
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));

var trs = table.find("tr");
trs.each(function () {
    var tr = $(this).text();
    var data = $.data(tr, "number");
    console.log("number: " + data);
});

为此：
newRow.data("number", i);
console.log("Data added to row: " + newRow.data("number"));

table.find("tr").each(function () {
    console.log("number: " + $(this).data("number"));
});

然后，改变这个：
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));

var trs = table.find("tr");
trs.each(function () {
    var tr = $(this).text();
    var data = $.data(tr, "number");
    console.log("number: " + data);
});

为此：
newRow.data("number", i);
console.log("Data added to row: " + newRow.data("number"));

table.find("tr").each(function () {
    console.log("number: " + $(this).data("number"));
});

$.data（）
要求实际的DOM元素作为第一个参数，而不是jQuery对象。您可以使用jQuery对象$（选择器）.data（）
。我建议你改变这一点：
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));

var trs = table.find("tr");
trs.each(function () {
    var tr = $(this).text();
    var data = $.data(tr, "number");
    console.log("number: " + data);
});

为此：
newRow.data("number", i);
console.log("Data added to row: " + newRow.data("number"));

table.find("tr").each(function () {
    console.log("number: " + $(this).data("number"));
});

然后，改变这个：
$.data(newRow, "number", i);
console.log("Data added to row: " + $.data(newRow, "number"));

var trs = table.find("tr");
trs.each(function () {
    var tr = $(this).text();
    var data = $.data(tr, "number");
    console.log("number: " + data);
});

为此：
newRow.data("number", i);
console.log("Data added to row: " + newRow.data("number"));

table.find("tr").each(function () {
    console.log("number: " + $(this).data("number"));
});

你弄乱了数据
方法。您没有将数据应用于动态创建的行。要查看结果，请检查您的控制台


JQuery数据（）测试
var表=$（“#myTable”）；
对于（变量i=0；i<5；i++）{
var newRow=$（“#rowPrototype”）.clone（）；
newRow.removeAttr（“风格”）；
newRow.removeAttr（“id”）；
newRow.数据（“编号”，i）；
console.log（“添加到行的数据：”+newRow.Data（“编号”））；
var tds=newRow.find（“td”）；
tds.文本（“测试”）；
表.追加（新行）；
}
var trs=表格查找（“tr”）；
trs.each（函数（）{
var tr=$（this.text（）；
变量数据=$（此）.data（“数字”）
控制台日志（“编号：+数据）；
});
您弄乱了数据
方法。您没有将数据应用于动态创建的行。要查看结果，请检查您的控制台


JQuery数据（）测试
var表=$（“#myTable”）；
对于（变量i=0；i<5；i++）{
var newRow=$（“#rowPrototype”）.clone（）；
newRow.removeAttr（“风格”）；
newRow.removeAttr（“id”）；
newRow.数据（“编号”，i）；
console.log（“添加到行的数据：”+newRow.Data（“编号”））；
var tds=newRow.find（“td”）；
tds.文本（“测试”）；
表.追加（新行）；
}
var trs=表格查找（“tr”）；
trs.each（函数（）{
var tr=$（this.text（）；
变量数据=$（此）.data（“数字”）
控制台日志（“编号：+数据）；
});
P.S.我知道使用jquery最新链接是一种不好的做法。举个例子，你最好提供一份工作合同jsFiddle@Itay好的，我添加了linkP.S。我知道使用jquery最新链接是一种不好的做法。举个例子，你最好提供一份工作合同jsFiddle@Itay好的，我添加了关于第一个的链接（存储数据后记录数据）：没有这个更改，它工作得很好，但我认为它更好。第二，现在它工作正常了，谢谢！修复：我现在明白了，我在元素中存储数据的方法也不正确，所以这两种更改对于第一种（存储数据后记录数据）来说都是必要的：没有这种更改，它工作得很好，但我认为这是更好的方法。第二，现在它工作正常了，谢谢！修复：我现在明白了，我在元素中存储数据的方法也不正确，所以这两个更改都是错误的necessary@coolguy在#myTable
中实际上只有两个td
元素吗？@coolguy在#myTable
中实际上只有两个td
元素吗？