Данные jQuery (): невозможно получить сохраненные данные с помощью селекторов jQuery

Я хочу хранить некоторую информацию в элементах DOM (строки таблицы). Я думаю, что я могу сделать это с помощью JQuery's 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 ответа

Решение

$.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"));
});
Источник

Вы перепутались с 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] или использовать .get(i) в $.data(newRow[i], "number", i); и все js что следует где $.data() используется для ссылки DOM элемент.

Существует также проблема с for петля. Если на самом деле есть только один tr элемент и два td элементы внутри #myTable, когда i достигает 2, если селектор включен i результат будет undefined в качестве максимального индекса td элементы все равно будут 1 в клонированном table; будь то $.data() или же .data() используется. Аналогично для одного tr элемент внутри #myTable; когда i достигает 1

jQuery.data( element, key, value )

элемент

Тип: Элемент

Элемент DOM для связи с данными.

Источник
Другие вопросы по тегам