過去バージョン

.children() の基本

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

  
項目1
  
項目2
    

      
サブ1
  
      
サブ2
    
  
  
項目3

// 直下の 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

React

function Menu({ items }) {
  return (
    

      {items.map(item => 
{item.name}
)}
      
件数: {items.length}
    
  );
}

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