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

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

источник

2016-03-27 coolguy

P.S. Я знаю, что использование последней ссылки jquery - плохая практика. Это просто, к примеру. – coolguy

Желательно, чтобы вы обеспечиваете с рабочим jsFiddle – Itay

@Itay ок, я добавил ссылку – coolguy

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

источник

2016-03-27 06:46:14 jfriend00

О первом (данные регистрации после его хранения): он отлично работал без этого изменения, но я думаю, что это лучше. И примерно второй, теперь он отлично работает, спасибо! – coolguy

Исправление: теперь я понимаю, что мой способ хранить данные в элементе тоже не прав, поэтому оба этих изменения необходимы – coolguy

$.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-элемент для связывания с данными.

источник

2016-03-27 06:42:29 guest271314

@coolguy Есть ли на самом деле только два 'td' элементы в' # myTable'? – guest271314

Вы запутались с методом 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>

источник

2016-03-27 06:47:17

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

ответ

Смежные вопросы