jQueryを使用してデータ属性値に基づいて要素にクラスを追加する方法

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

HTML マークアップでは、data-* を使用して要素にカスタム データ属性を割り当てることができます。属性の構文。これらの属性は、JavaScript コードでアクセスまたは操作できる追加情報を保存するためによく使用されます。

一般的な使用例の 1 つは、データ属性の値に基づいて要素に特定のクラスを追加することです。たとえば、次の HTML 要素について考えてみましょう:

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data- slide="2">3</a><br>

私たちの目標は、data-slide 属性値 0 (ゼロ) を持つ要素に「active」クラスを追加することです。 ).

Attribute Equals Selector

jQuery は、特定の属性の正確な値に基づいて要素を選択できる属性 Equals セレクターを提供します。目標を達成するには、次のコードを使用できます:

$('.slide-link[data-slide="0"]').addClass('active');<br>

このコードは、クラス「slide-link」および「0」に等しい data-slide 属性を持つ要素を選択します。次に、「アクティブ」クラスをそれに追加します。

.find() について

最初の試行で使用された .find() メソッドは機能します。 DOM ツリーをトラバースすることによって。ただし、この場合は、子孫ではなくデータ属性に基づいて要素を選択する必要があります。したがって、このタスクには属性に等しいセレクターを使用する方が適切です。

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