<ul> の直接の子要素を返す：
$(document).ready(function(){
$("ul").children().css({"color": "red", "border": "2px
solid red"});
});
結果：
body (great-grandparent)
div (grandparent)
ul (parent)
- li (child)
span (grandchild)
Try it Yourself »
children() メソッドは、選択した要素の全ての直接の子を返します。
DOM ツリー: このメソッドは、 DOMツリーの１つ下のレベルだけをトラバースします。 （孫または他の子孫を返すために）複数下のレベルをトラバースするには、 find() メソッドを使用します。
チップ: DOMツリーの１つ上のレベル、 または（親やその他の祖先を返すために）文書のルート要素に達するまで上にトラバースするには、 parent() または parents() メソッドを使用します。
注: このメソッドはテキストノードを返しません。テキストノードを含む全ての 子ノードを取得するには、contents() メソッドを使用します。
$(selector).children(filter)
| パラメータ | 説明 |
|---|---|
| filter | 任意。子の検索を絞り込むためにセレクタ式を指定する< |
<ul> の全ての直接の子を返す
<ul> の全ての直接の子を返す方法。
検索の絞り込み
<ul> の直接の子で、クラス名が "1" である全ての <li> 要素を返すための filter パラメータの使用方法。
<div> の直接の子である全 <p> 要素を返す
親要素 <div> の直接の子である全 <p> 要素を選択する方法。
タグ名で要素の子孫を表示する
<div> 要素の子孫は、実際に何であるかを示すデモ。