jQuery逆引きリファレンス
特定の要素を基点に別の要素を検索するには？（find）
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。
現在の要素セット（jQueryオブジェクトが保持している要素群）の配下から要素を検索するには、findメソッドを利用します*1。すでに検索すべき範囲（jQueryオブジェクト）が取得できている場合は、文書全体を$()関数で検索するよりも、findメソッドを利用した方が効率的です。
- *1 よく似たメソッドに
filterメソッドがありますが、こちらは現在の要素セットそのものを絞り込むのに利用します。詳しくは、別稿「TIPS：要素セットを指定の条件で絞り込むには？」を参照してください。
具体的な例も見てみましょう。以下は、「id="me"」である要素にスタイル付けすると共に、その配下から「class="fav"」である要素にスタイル付けする例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style> #family div { margin-left: 10px; } </style>
</head>
<body>
<div id="family">
お祖父さん
<div>
お父さん
<div>大きいお兄さん</div>
<div class="fav">小さいお兄さん</div>
<div id="me">
ぼく
<div class="fav">ペットのサクラ</div>
</div>
<div>弟</div>
<div class="fav">妹</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function() {
$('#me').
css('border', 'solid 1px Red'). // 枠線を付与
find('.fav').
css('background-color', 'Yellow'); // 背景色を付与
});
</script>
</body>
</html>
|
「class="fav"」である要素は複数存在しますが、スタイルが適用されているのは、「id="me"」である要素配下の「<div class="fav">ペットのサクラ</div>」だけである点に注目してください。
もちろん、最初から「<div class="fav">ペットのサクラ</div>」を取得したいならば、findメソッドを利用せずに、「$('#me .fav')」で一気に検索すべきです。
API：.find() カテゴリ：Traversing（トラバーシング） > Tree Traversal（検索／ツリー上の要素選択）
※以下では、本稿の前後を合わせて5回分（第68回～第72回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
68. 異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
70. 【現在、表示中】≫ 特定の要素を基点に別の要素を検索するには？（find）
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。
71. 親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）
parents／parent／prev／prevAll／next／nextAll／siblings／children／endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子／兄弟関係にある要素を取得する方法を説明する。
72. 現在の要素から指定された祖先／兄弟要素までを取得するには？（prevUntil／nextUntil／parentsUntil）
prevUntil／nextUntil／parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において（指定された）兄／弟／親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。
