ホームページ >ウェブフロントエンド >CSSチュートリアル >jQuery を利用してデータ属性値に基づいて HTML 要素を検索するにはどうすればよいでしょうか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-04 18:56:01416ブラウズ

How Can You Utilize jQuery to Find HTML Elements Based on Data Attribute Values?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。