0

data-people 内の json でエンコードされたデータの 1 つを取得する必要があります。

<ul>
  <li data-test="one" data-people='{"name" : "Paul", "color" : "black"}'>Paul</li>
  <li data-test="two" data-people='{"name" : "John", "color" : "blond"}'>John</li>
  <li data-test="three" data-people='{"name" : "Jane", "color" : "black"}'>Jane</li>
</ul>

data-test を介してフェッチするのは非常に簡単です (単なる例):

$('ul li[data-test="two"]').show();

ここで、色が金髪の data-people で ul li を表示したいと思います (上記のサンプルにのみ存在する data-test は無視します)。

以下でテストしましたが、これは期待どおりに機能しません。

$('ul li[data-people="{"color": "blond"}"]').show();

のような色の値を取得するつもりはありません$('ul li').data('people').colorが、オブジェクト内で適切な CSS 構文を実行します。

どんなヒントでも大歓迎です。ありがとう。

4

1 に答える 1

5

*=("attribute contains") セレクターを使用する場合を除いて、セレクターだけを使用してこれを行うことはできません。JSONにその部分文字列が正確に含まれている場合にのみ機能します-前のスペースを削除する:と、機能しなくなります.

$('ul li[data-people*=\'"color" : "blond"\']').show();

おそらく本当に欲しいのは.filter()：

$('ul li[data-people]').filter(function() {
    return $(this).data('people').color == 'blond';
}).show();

このように、(高速) CSS セレクター エンジンを使用して関連する要素 (属性を持つ要素) のみを取得data-peopleし、コールバック関数を使用して結果セットをフィルター処理します。

于 2013-01-06T12:31:40.620 に答える