javascript - jQueryでdata属性をdivに設定する

Question

以前は値がなかった div にデータ属性を設定しようとしています。

<div></div>

jQuery では、最初のメソッド (data) は何もしませんが、attr メソッドは正しく機能します。

var div = $('div');
div.data('superhero_one','batman');
div.attr('data-superhero_two','spiderman');

データ関数を間違って使用していますか?

score 5 · Accepted Answer

それはうまくいきます！

.data()その背後にある実際のことは、 jqueryが内部的に設定するため、使用時に実際の属性を見ることができないということです。ただし.attr()、検査できる要素に属性を追加します。

このデモを参照してください--> http://jsfiddle.net/5bT8p/1/

score 3 · Accepted Answer

$("div").data("superhero_two","spiderman");

正しい構文です。しかし、検査するとき、私はdata-superhero_two="spiderman"（意図したとおりに）見ているだけです。from 属性.attrは DOM で設定され、はJQuery オブジェクトのみ.data で設定されます。

ところで、ドキュメントの準備完了関数を使用して、適切なタイミングで実行されるようにします。

$(document).ready(function() {
    $("div").data("superhero_two","spiderman");
});

score 1 · Accepted Answer

動作が異なるため、正常に動作していますjQuery.data:

一致した要素に関連付けられた任意のデータを保存するか、一致した要素のセットの最初の要素の名前付きデータストアで値を返します。

そのため、要素には html 属性が設定されませんが、キーと値のペアは jQuery オブジェクト参照内に格納されます。

つまり、違いは$.data、DOM 要素を変更せずに情報を格納するためにattr使用され、要素の属性を操作するために使用されます。

score 1 · Accepted Answer

$("div").data("superhero_two","spiderman");

.data() |を与えることをお勧めします。jQuery API ドキュメントを読む。データ属性を設定および取得するための例がたくさんあります。

これは jsfiddle での同じ使用例です: http://jsfiddle.net/yrshaikh/293nk/1/

4 に答える 4