15

jQuery 1.7.2 が DOM データ属性を更新していないようです。次のマークアップがあるとします。

<ul id="foo">
    <li data-my-key="12345">ABCDEF</li>
</ul>

以下の JavaScript を実行すると、予期しない結果が得られます。

$('#foo li:first').data('my-key') // Returns 12345 - Expected
$('#foo li[data-my-key="12345"]') // Returns the expected <li>
$('#foo li:first').data('my-key', '54321')
$('#foo li:first').data('my-key') // Returns 54321 - Expected
$('#foo li[data-my-key="54321"]') // Returns an empty array - Not expected

さらに調査したところ、.data() 関数を使用して新しい値を設定した後、DOM が変更されていないことに気付きました (Chrome 21.0.1180.81、Firebug 1.10.3、および Firefox 14.0.1 の「Inspect Element」で検証済み)。

この動作は予想外ですが、これは jQuery データが機能するための意図された方法ですか? もしそうなら、jQuery で data-* 属性を更新する適切な方法は何ですか? attr() 関数を使用するだけですか?

4

1 に答える 1

7

$('#foo li[data-my-key="54321"]')属性セレクターです。

を使用すると、フィルターを使用しないと選択できない.data(..)要素のプロパティが変更されます。

特定のプロパティを持つすべての要素を取得したい場合は、これを行うことができます (を使用filter(...)):

$('#foo li').filter(function(index) {
  return $(this).data('my-key') === 54321;
}); //returns all `#foo li` with data[my-key] === 54321

詳細については、こちらを参照してください: .prop() と .attr()

于 2012-09-07T15:18:59.533 に答える