過去バージョン

.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()

セレクタフィルタ

// 直下の .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() 相当の挙動になります。

パフォーマンス比較

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

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')。