jQuery逆引きリファレンス
子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。
コンテンツフィルターを利用することで、配下の子要素、テキストの内容によって、取得すべき要素を特定できるようになります。
配下に子要素／テキストを持つ要素を取得する
:parentフィルターを利用することで、配下に何らかの子要素／テキストを持つ要素だけを取得できます。
例えば以下は、空でないセル（<td>要素）に背景色を付与します。
|
<!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>
|
もしも空のセルを特定したいならば、:emptyフィルターを利用してください。以下は、上の太字部分を書き換えたコードと、その結果です。
|
$('td:empty').css('background-color', 'Yellow');
|
配下に特定のテキストを含んだ要素を取得する
:contains(text)フィルターを利用することで、指定されたテキストを配下に含んだ要素だけを取り出せます。文字列の大文字／小文字は区別されます。
例えば以下は、配下に「jQuery」という文字列を含んだ<td>要素の背景色を黄色に変更する例です。
|
<!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>
|
指定のセレクターに合致する子要素を含んだ要素を取得する
:has(selector)フィルターは、指定されたセレクターに合致する要素を子供に持つかどうかによって、要素を取得します。例えば以下は、<strong>要素を含んだ<td>要素の背景色を変更する例です（<strong>要素そのものに着色するわけではありませんので、混同しないようにしてください）。
|
<!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>
|
API：jQuery()｜$() カテゴリ：Core（コア）
処理対象：基本フィルター カテゴリ：セレクター
API：:parentフィルター｜:emptyフィルター｜:contains()フィルター｜:has()フィルター カテゴリ：Selectors（セレクター） > Content Filter（コンテンツフィルター）
API：:parentセレクター｜:has()セレクター カテゴリ：Selectors（セレクター） > jQuery Extensions（jQuery拡張）
※以下では、本稿の前後を合わせて5回分（第38回～第42回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
38. 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素／子孫要素／直後の要素／以降の要素などを絞り込んで取り出す方法を説明する。
39. 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。
40. 【現在、表示中】≫ 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。
41. 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-child／:last-childフィルターにより先頭／末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child／:nth-last-childフィルターにより先頭／末尾からn個おきに子要素を取得する方法を解説。
42. 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-of-type／:last-of-typeフィルターにより同じ要素の中で先頭／末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type／nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。
