Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター

2016年3月3日

:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できる。

  • このエントリーをはてなブックマークに追加

 コンテンツフィルターを利用することで、配下の子要素、テキストの内容によって、取得すべき要素を特定できるようになります。

配下に子要素/テキストを持つ要素を取得する

 :parentフィルターを利用することで、配下に何らかの子要素/テキストを持つ要素だけを取得できます。

 例えば以下は、空でないセル(<td>要素)に背景色を付与します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<table border="1">
  <tr><th>ゲームタイトル</th><th>DL版</th></tr>
  <tr><td>jQueryバトル</td><td></td></tr>
  <tr><td>WINGSファイター</td><td></td></tr>
  <tr><td>JSクエスト</td><td></td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('td:parent').css('background-color', 'Yellow');
});
</script>
</body>
</html>
配下に何らかの要素を持つかどうかで要素を特定するコード(parent.html)
空でないセルに背景色が付与された
空でないセルに背景色が付与された

 もしも空のセルを特定したいならば、:emptyフィルターを利用してください。以下は、上の太字部分を書き換えたコードと、その結果です。

JavaScript
$('td:empty').css('background-color', 'Yellow');
配下が空であるかどうかで要素を特定するコード(parent.html)
空のセルに背景色が付与された
空のセルに背景色が付与された

配下に特定のテキストを含んだ要素を取得する

 :contains(text)フィルターを利用することで、指定されたテキストを配下に含んだ要素だけを取り出せます。文字列の大文字/小文字は区別されます。

 例えば以下は、配下に「jQuery」という文字列を含んだ<td>要素の背景色を黄色に変更する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<table border="1">
  <tr><th>ゲームタイトル</th><th>DL版</th></tr>
  <tr><td>jQueryバトル</td><td></td></tr>
  <tr><td>WINGSファイター</td><td></td></tr>
  <tr><td>JSクエスト</td><td></td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('td:contains("jQuery")').css('background-color', 'Yellow');
});
</script>
</body>
</html>
配下のテキストによって要素を特定するコード(contains.html)
「jQuery」という文字列を含んだ欄に背景色が付与された
「jQuery」という文字列を含んだ欄に背景色が付与された

指定のセレクターに合致する子要素を含んだ要素を取得する

 :has(selector)フィルターは、指定されたセレクターに合致する要素を子供に持つかどうかによって、要素を取得します。例えば以下は、<strong>要素を含んだ<td>要素の背景色を変更する例です(<strong>要素そのものに着色するわけではありませんので、混同しないようにしてください)。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<table border="1">
  <tr><th>ゲームタイトル</th><th>DL版</th></tr>
  <tr><td>jQueryバトル</td><td></td></tr>
  <tr><td><strong>WINGS</strong>ファイター</td><td></td></tr>
  <tr><td>JSクエスト</td><td></td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('td:has(strong)').css('background-color', 'Yellow');
});
</script>
</body>
</html>
配下の子要素によって要素を特定するコード(has.html)
<strong>要素を含んだ欄に背景色が付与された
<strong>要素を含んだ欄に背景色が付与された
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:基本フィルター カテゴリ:セレクター
API::parentフィルター|:emptyフィルター|:contains()フィルター|:has()フィルター カテゴリ:Selectors(セレクター) > Content Filter(コンテンツフィルター)
API::parentセレクター|:has()セレクター カテゴリ:Selectors(セレクター) > jQuery Extensions(jQuery拡張)

※以下では、本稿の前後を合わせて5回分(第38回~第42回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
38. 親子/兄弟関係にある要素を取り出すには? ― 階層セレクター

jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。

jQuery逆引きリファレンス
39. 登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター

jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明する。

jQuery逆引きリファレンス
40. 【現在、表示中】≫ 子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター

:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できる。

jQuery逆引きリファレンス
41. 子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説。

jQuery逆引きリファレンス
42. 子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-of-type/:last-of-typeフィルターにより同じ要素の中で先頭/末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type/nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。

サイトからのお知らせ

Twitterでつぶやこう!