<ul> の子孫である全 <span> 要素を返す：
$(document).ready(function(){
$("ul").find("span").css({"color": "red", "border": "2px
solid red"});
});
結果：
body (great-grandparent)
div (grandparent)
ul (parent)
- li (child)
span (grandchild)
Try it Yourself »
find() メソッドは、選択した要素の子孫要素を返します。
子孫とは子、孫、曾孫などを言います。
DOM ツリー： このメソッドは、DOM 要素の子孫に沿って最後の子孫に達するまで下方向にトラバースします。 直接の子のみを返すため、DOM ツリーの 1 レベル下だけをトラバースするには、 children() メソッドを使用します。
注:filter パラメータは、ツリーをトラバースする他のメソッドとは異り、find() メソッドには必須です。
チップ: 全ての子孫要素を返すには、"*" セレクタを使用します。
$(selector).find(filter)
| パラメータ | 説明 |
|---|---|
| filter | 必須。子孫の検索をフィルタするための、セレクタ式または jQuery オブジェクト 注: 複数の子孫を返すためには、各式をカンマで区切ること。 |
<html> の全子孫要素を返す
<html> の全子孫要素を返すために "*" セレクタを使用します。
<ul> の子孫である全ての <span> 要素を返す
<ul> の子孫である全ての <span> 要素を返す方法。
指定のクラス名を持つ子孫だけを選択する
クラス名 "first" を持つ子孫要素を返す方法。
複数の子孫を返す
複数の子孫要素を返す方法。
すべての <ul> 要素の jQuery コレクションで子孫検索をフィルタする
jQuery オブジェクトで <ul> 要素の子孫である全ての <span> 要素を返す方法。
タグ名で要素の子孫を表示する
<div> 要素の子孫は、実際に何であるかを示するデモ。