jQueryの「:contains」セレクターを使いこなそう！要素を内容で簡単選択
jQueryで要素をコンテンツの一致で選択する方法
:contains()セレクター
:contains()セレクターは、要素のテキストコンテンツの一部または全体に一致する要素を選択します。以下の構文で使用します。
$(selector:contains(text))
selector: 対象となる要素を絞り込むセレクターtext: 一致するテキスト
例えば、以下のHTMLコードにおいて、"キーワード"を含むすべての<p>要素を選択するには、次のように記述します。
<p>本文1</p>
<p>キーワードを含む本文2</p>
<p>本文3</p>
$("p:contains(キーワード)")
このコードは、以下の要素を選択します。
<p>キーワードを含む本文2</p>
filter()メソッド
filter()メソッドは、jQueryオブジェクトに対してフィルタ処理を行い、一致する要素のみを抽出します。コンテンツの一致で要素を抽出するには、:contains()セレクターをfilter()メソッド内に記述します。以下の構文で使用します。
$(selector).filter(function() {
return $(this).text().contains(text);
})
上記のコードは、:contains()セレクターと同じ挙動をします。
- 複数の条件を組み合わせることもできます。例えば、クラス名とコンテンツの一致で要素を選択するには、次のように記述します。
$(".className:contains(text)")
- 上記の例はあくまで基本的な使用方法です。状況に応じて、様々なセレクターを組み合わせて使用することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで要素をコンテンツの一致で選択</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>本文1</p>
<p>キーワードを含む本文2</p>
<p>本文3</p>
<div class="target">
<p>キーワードを含むコンテンツ</p>
</div>
<script>
$(document).ready(function() {
// :contains()セレクターを使った例
$("p:contains(キーワード)").css("background-color", "yellow");
// filter()メソッドを使った例
$(".target").filter(function() {
return $(this).text().contains("キーワードを含む");
}).css("border", "1px solid red");
});
</script>
</body>
</html>
説明
このコードは以下の処理を行います。
:contains()セレクターを使った例$("p:contains(キーワード)")で、"キーワード"を含むすべての<p>要素を選択します。- 選択した要素に対して、
css("background-color", "yellow")で背景色を黄色に設定します。
- filter()メソッドを使った例
$(".target")で、クラス名 "target" を持つ要素を選択します。filter(function() { return $(this).text().contains("キーワードを含む"); })で、要素の内容に"キーワードを含む"が含まれている要素のみを選択します。- 選択した要素に対して、
css("border", "1px solid red")で境界線を赤色の1px実線に設定します。
このコードを実行すると、以下のようになります。
<p style="background-color: yellow;">キーワードを含む本文2</p>
<p>本文3</p>
<div class="target" style="border: 1px solid red;">
<p>キーワードを含むコンテンツ</p>
</div>
.children()メソッドは、対象要素の子要素のみを選択します。このメソッドと:contains()セレクターを組み合わせることで、親要素の内容に一致する子要素を選択することができます。以下の構文で使用します。
$(selector).children(":contains(text)")
selector: 対象となる親要素
<div>
<p>本文1</p>
<p>キーワードを含む本文2</p>
<p>本文3</p>
</div>
$("div").children(":contains(キーワード)")
<p>キーワードを含む本文2</p>
.find()メソッド
$(selector).find(":contains(text)")
.children()メソッドと異なり、.find()メソッドは子孫要素すべてを選択するため、より多くの要素が選択される可能性があります。
属性セレクター
属性セレクターは、要素の属性値に基づいて要素を選択します。要素のidやclass属性に一致する要素を選択することはできますが、コンテンツの一致で要素を選択することはできません。
ただし、要素のdata-*属性にコンテンツを格納している場合は、属性セレクターを使用してコンテンツの一致で要素を選択することができます。以下の例では、data-content属性に"キーワード"を含むすべての要素を選択します。
$("[data-content=キーワード]")
カスタムセレクター
jQueryでは、カスタムセレクターを作成することもできます。カスタムセレクターを使用すれば、より複雑な条件で要素を選択することができます。例えば、以下のコードは、要素の内容が"キーワード"を含むかつ、クラス名 "target" を持つ要素を選択します。
$(function() {
$.extend($.fn.filter, {
contentContains: function(text) {
return $(this).text().contains(text);
}
});
$(".target:contentContains(キーワード)")
.css("background-color", "yellow");
});
<p class="target" data-content="キーワードを含むコンテンツ">キーワードを含むコンテンツ</p>
jquery jquery-selectors
