0

次のhtmlコードがあります。

<ul>
    <li  data-details="li1">first</li>
    <li  >second</li>
</ul>

最初の要素にdata-details は、値を持つ属性を追加していることに注意してください。2 番目のli要素については、jquery を使用して同じものを追加しています。これが私のJavaScriptコードです。

$(document).ready(function()
                  {
                      $("ul li:nth-child(2)").data("details","li2");
                      console.log($("ul li:nth-child(2)").data()); //data can be verified using this
                      alert($("ul li[data-details=li1]").length); //resulting in alert 1
                      alert($("ul li[data-details=li2]").length); //resulting in alert 0
                  });

コンソールをチェックすることで確認できるデータが追加されます。data-details ただし、jquery によって追加される値に基づいて要素を選択することはできません。なぜそれが起こっているのですか？

そしてここにjsfiddleリンクがあります

4

1 に答える 1

2

で項目を設定しても属性は設定され.data() ません。HTML で属性を設定するか、 などを使用する場合は、属性セレクター.attr()を使用できます。セットを持つ要素を見つける必要がある場合は、次を使用する必要があります。.data().filter()

var el = $("selector").filter(function () {
    return typeof $(this).data("whatever") !== undefined;
});
console.log(el.length);

これは、逆の方法では同じ動作ではないことに注意してください。HTML または で属性を設定すると.attr()、任意の属性がjQuery によってdata-*自動的に挿入されます。.data()

デモ: http://jsfiddle.net/zTsS4/2/

デモでは、属性が 1 つの HTML で設定され、<li>もう1 つの属性が で設定されていることに注意してください.data()。次に、.filter()両方を見つけます。

于 2013-05-09T04:17:54.507 に答える