jQuery を利用してデータ属性値に基づいて HTML 要素を検索するにはどうすればよいでしょうか?

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

HTML では、データ属性は JavaScript で使用できる情報を格納するために使用され、 CSS。データ属性値に基づいて要素にアクセスするために、jQuery にはいくつかのオプションが用意されています。

Attribute Equals Selector

最も簡単なアプローチは、Attribute Equals Selector を使用することです。

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

このセレクターは、特定のデータ属性と特定の値を持つ要素を照合します。この場合、data-slide="0" の要素が選択され、それにアクティブなクラスが追加されます。

.find() メソッドの使用

別のアプローチは、.find() メソッドを使用して、一致した要素内の子孫要素を検索することです。

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

ただし、このメソッドは親要素ではなく子孫を検索します。ターゲット要素は検索している要素の親であるため、このシナリオでは機能しません。

.find() メソッドについて

.find () メソッドは、DOM ツリーを下方向にトラバースして、指定されたセレクターに一致する子孫要素を検索するように設計されています。親要素は検索しません。

<!-- HTML Code -->
<div class="container">
  <p>Paragraph 1</p>
  <div class="nested-container">
    <p>Nested Paragraph</p>
  </div>
</div>

<!-- jQuery Code -->
$('.container').find('p').text('Hello World');

この例では、.find('p') はすべての

を検索します。 .container の子である要素。

とは一致しません。 .container.

の直接の子ではないため、ネストされたコンテナ内の要素

以上がjQuery を利用してデータ属性値に基づいて HTML 要素を検索するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。