jQuery data（）：jQueryセレクタを使用して保存されたデータを取得できません

DOM要素（テーブルの行）に情報を保存します。私はjQueryのdata()関数を使ってそれを行うことができると思います。私はいくつかのテストコードを書いて、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-latestリンクの使用は悪い習慣であることは知っています。それは単なる例です。 – coolguy

作業中のjsFiddleを提供することをお勧めします – Itay

@Itay ok、私はリンクを追加しました – coolguy

$.data()は、実際のDOM要素が最初の引数であり、jQueryオブジェクトではありません。 jQueryオブジェクトを使用して$(selector).data()にすることができます。私はあなたがこれを変更することをお勧めしたい：

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); 
});

を：これに

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

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

出典

2016-03-27 06:46:14 jfriend00

最初のものについて（これを保存した後のデータのロギング）：この変更を行わなくてもうまくいきましたが、あなたの方が良いと思います。そして約2分の1、今それは正常に動作します、ありがとう！ – coolguy

修正：要素にデータを格納する私のやり方が正しくなかったことを知ったので、これらの変更は両方とも必要です – coolguy

$.data()はDOM要素ではなく、jQueryオブジェクトを期待しています。 [i]を追加するか、$.data(newRow[i], "number", i);で.get(i)を使用し、$.data()を使用してDOM要素を参照するすべてのjsを使用してください。

forループにも問題があります。実際セレクタiが含まれている場合iは、2に達する唯一tr要素と#myTable内の二つtdの要素がある場合td要素の最大屈折率は依然としてtableクローニング内1であるように、結果は、undefinedあろう。 $.data()または.data()が使用されます。同様に、内の要素tr; iが

1に達したときに
jQuery.data(element, key, value)

要素

タイプ：要素

データに関連付けるDOM要素。

出典

2016-03-27 06:42:29 guest271314

@coolguy実際には '＃myTable'内に2つの' td'要素しかありませんか？ – 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セレクタを使用して保存されたデータを取得できません

答えて

関連する問題