jQueryの巡回 - children()メソッド

jQuery 遍历参考手册

インスタンス

「selected」クラスのすべてのdivの子要素を見つけ、それを青色に設定します：

$("div").children(".selected").css("color", "blue");

自分で試してみてください

定義と用法

children() メソッドは選択された要素のすべての直接子要素を返します。

文法

.children(selector)
引数 説明
selector 文字列値、マッチする要素の選択子表現を含みます。

詳細な説明

DOM 要素集合を表す jQuery オブジェクトが与えられた場合、.children() メソッドは DOM 木内のこれらの要素を検索し、マッチする要素で構成された新しい jQuery オブジェクトを作成することができます。.find() .children() メソッドと同様ですが、後者は DOM 木を単一レベルに沿って遍历します。

多くの jQuery メソッドと同様に、.children() メソッドはテキストノードを返しません。テキストおよびコメントノードを含むすべての子ノードを取得するには、.contents() を使用してください。

このメソッドは選択子表現をオプションの引数として受け取り、$() に渡した引数の種類と同じです。選択子を適用すると、テスト要素がその表現にマッチするかどうかをテストし、これらの要素をフィルタリングするために使用されます。

この基本的なネストリストを持つページについて考えてみてください：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

自分で試してみてください

level-2 リストから始める場合、その子要素を見つけることができます：

$('ul.level-2').children().css('background-color', 'red');

このコードの結果は、プロジェクト A、B、C に赤い背景が適用されます。選択子表現を適用していないため、返される jQuery オブジェクトにはすべての子要素が含まれています。選択子を適用すると、マッチするプロジェクトのみが含まれます。

jQuery 遍历参考手册