この記事の要点

$(sel).children() は直下の子要素のみを返す。孫以降は含まない セレクタでフィルタ可能: $("div").children(".cls") .find() との違い: find は子孫すべて、children は直下のみ 生 DOM では element.children (HTMLCollection) / element.childNodes (テキストノード含む) 現代の querySelectorAll(":scope > *") で同等処理が可能 Vue / React では v-for / map() でテンプレート側にループを書くのが主流

.children() の基本

jQuery .children() は、現在マッチしている要素群の直下の子要素のみを集めた jQuery オブジェクトを返します。孫以降は含みません。

<ul id="menu">
  <li>項目1</li>
  <li>項目2
    <ul>
      <li>サブ1</li>  <!-- 孫 -->
      <li>サブ2</li>
    </ul>
  </li>
  <li>項目3</li>
</ul>

// 直下の li 3 つだけが取れる (サブ1, サブ2 は含まない)
$('#menu').children().length;       // → 3
$('#menu').children('li').length;   // → 3 (セレクタフィルタも同じ)

// 子孫すべてが欲しい場合は .find()
$('#menu').find('li').length;       // → 5

.children() vs .find()

メソッド	対象	セレクタ引数	速度
.children()	直下の子要素のみ	省略可 (省略時は全子要素)	速い
.find()	子孫全要素	必須 (省略すると空)	木が深いと遅い
.parent()	直上の親	省略可	非常に速い
.parents()	祖先全要素	省略可	木が深いと遅い
.closest()	自身含む最も近い祖先	必須	速い
.siblings()	兄弟要素	省略可	速い

セレクタフィルタ

// 直下の .active クラスを持つ要素だけ
$('#list').children('.active');

// 複数セレクタ
$('#wrap').children('p, span, h2');

// :first / :last / :eq()
$('#tabs').children(':first');
$('#tabs').children(':eq(2)');  // 0-indexed の 3 番目

// 否定
$('#list').children(':not(.disabled)');

典型的なユースケース

1. 動的にリスト件数をカウント

$('#cart').on('itemAdded', function() {
  const count = $(this).children('.item').length;
  $('.badge').text(count);
});

2. 偶数行に背景色

$('table tbody').children('tr:even').css('background', '#f7f7f7');

// より現代的には CSS 単体で
// tbody tr:nth-child(even) { background: #f7f7f7; }

3. アコーディオン: 兄弟を閉じて自分だけ開く

$('.accordion-header').on('click', function() {
  const $parent = $(this).parent();
  $parent.siblings().children('.body').slideUp();
  $parent.children('.body').slideToggle();
});

生 DOM の同等処理

const menu = document.getElementById('menu');

// 直下の子要素 (HTMLCollection、ライブ)
menu.children;                  // HTMLCollection [li, li, li]
menu.children.length;           // 3
[...menu.children];             // 配列に変換

// childNodes はテキストノードや改行も含む
menu.childNodes;                // [text, li, text, li, text, li, text]

// セレクタフィルタ付き直下取得
menu.querySelectorAll(':scope > li.active');
menu.querySelectorAll(':scope > .item:not(.disabled)');

// :scope を付けないと "menu の中の全 li" になる (find と同じ)
menu.querySelectorAll('li');    // 孫まで全部

:scope 疑似クラスの重要性

element.querySelectorAll() はデフォルトで「element の子孫から探す」動作。:scope を付けることで「element 自身を基準にする」明示ができ、.children() 相当の挙動になります。

パフォーマンス比較

方法	速度 (10000要素)	備考
$(el).children()	速い	jQuery オブジェクト生成のオーバーヘッド
el.children	最速	ネイティブ、HTMLCollection はライブ
el.querySelectorAll(":scope > *")	速い	静的 NodeList
Array.from(el.children)	速い	配列メソッド使うなら

現代フレームワークでの代替パターン

Vue 3

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <p>件数: {{ items.length }}</p>
</template>

React

function Menu({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
      <p>件数: {items.length}</p>
    </ul>
  );
}

jQuery で DOM を直接読んでカウントする必要はなく、状態 (state) から件数を導出するのが現代的な書き方です。

FAQ

Q: .children() はテキストノードも返す？
A: 返しません。要素ノードのみです。テキストノードまで欲しい場合は .contents() を使います。

Q: .children().eq(0) と .children(':first') どちらが速い？
A: ほぼ同じ。.eq() のほうが意図が明確で推奨されることが多いです。

Q: 直下の最初の .item だけ欲しい
A: $(el).children('.item').first() または el.querySelector(':scope > .item')。