jQuery属性値によるjQueryフィルターオブジェクト

この記事では、jQueryを使用してデータ属性値に基づいて要素をフィルタリングする方法について説明します。次のコードスニペットは、「proto_」から始まるIDを持つすべてのdiv要素を選択し、データ属性「状態」値は「オープン」です。

<code class="language-javascript">var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);</code>

jsfiddleデモ

最適化されたバージョン 最適化ソリューションについては、Vladに感謝します

jsfiddle最適化バージョンdemo

<code class="language-javascript">var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');</code>

JQUERYのFAQデータ属性によるオブジェクトのフィルタリング jQueryを使用してデータ属性に基づいてオブジェクトをフィルタリングする方法は？

jQueryは、データ属性に基づいてオブジェクトを操作およびフィルタリングする強力な方法を提供します。これは、jQueryの

関数を使用して実現できます。 関数は、そのパラメーターとして関数を指定することを可能にします。これはTRUEまたはFALSEを返す必要があります。関数がtrueを返すと、Falseが返された場合、要素が含まれます。基本的な例は次のとおりです

この例は、データ属性の「キー」の値ですべてのDIV要素をフィルタリングします。

と

の違いは何ですか？ .filter() .filter()

および

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key') === 'value';
});</code>

は、両方ともjQueryオブジェクトの要素の検索範囲を狭めるために使用されるjQueryメソッドです。それらの主な違いは次のとおりです。

一致する要素のセットを関数テストに一致または合格する要素に絞り込み、

は現在のマッチング要素コレクションの各要素の子孫を取得し、セレクター、jQueryオブジェクト、または要素を渡します。フィルター。

.filter().find()関数で複数のデータ属性を使用できますか？

はい。関数に条件を追加するだけです。たとえば、.filter() .find() この例は、すべてのDIV要素を、データ属性「Value1」の「key1」の値と、データ属性「value2」の「key2」の値でろ過します。 .filter() .find()特定の文字列を含むデータ属性値に基づいて要素をフィルタリングする方法は？

属性を含む属性を使用して.filter()を使用して、属性値に特定の文字列が含まれる要素を選択できます。たとえば、

この例は、すべてのデータ属性「キー」値「spring "value」を持つDiv要素を含む「キー」値をフィルタリングします。

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key1') === 'value1' && $(this).data('key2') === 'value2';
});</code>

他のjQueryメソッドで使用できますか？

はい。たとえば、

を使用して[name*="value"]を使用して、フィルター要素のスタイルを変更できます。

<code class="language-javascript">$('div[data-key*="value"]').filter(function() {
  // 您的代码
});</code>

この例は、「値」の「キー」値を赤から赤にするすべてのdiv要素のテキスト色を変更します。

以上がjQuery属性値によるjQueryフィルターオブジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。