jQuery でデータ属性に基づいて要素をターゲットにして操作する方法

Linda Hamilton
リリース: 2024-11-05 02:33:02
オリジナル
839 人が閲覧しました

How to Target and Manipulate an Element Based on its Data Attribute in jQuery?

jQuery でのデータ属性値による要素の検索

類似した構造とデータ属性を持つ複数の要素があります。タスクは、データ属性値に基づいて特定の要素をターゲットにして操作することです。

今回の場合、データ スライド属性値 0 を持つクラスを要素に追加します。これを実現するには、次のようにします。 jQuery の Attribute Equals Selector 構文を利用できます。

解決策:

説明:

  1. 属性が等しいセレクター: [attribute="value"]: 指定された属性と値に基づいて要素を選択します。ここで、[data-slide="0"] は、値 0 の data-slide 属性を持つ要素と一致します。
  2. addClass() メソッド: に新しい CSS クラスを追加します。選択した要素。この場合、 .addClass('active') はアクティブ クラスを要素に適用します。

find() メソッドとの比較:

以前のfind() メソッドを使用しようとしましたが、Attribute Equals Selector とは動作が異なります。 find() は、指定されたセレクターに一致する、選択された要素の子孫を検索します。このコンテキストでは、data-slide 属性値 0 を持つ子要素が検索されますが、これは意図したものではありません。

Fiddle Demo:

[Example]フィドルのデモ](https://jsfiddle.net/example-of-attribute-equals-selector/)

以上がjQuery でデータ属性に基づいて要素をターゲットにして操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!