【jQuery】全ての要素を取得する方法完全ガイド｜セレクタ・フィルタ・DOM traversal まで

jQueryでは豊富なセレクタと走査（traversal）メソッドを使って、特定条件に合う要素を柔軟に選択できます。本記事では基本セレクタ・属性セレクタ・フィルタ・親子兄弟の走査まで体系的に解説します。

1. 基本セレクタ

// 全要素（非推奨: パフォーマンス低下）
var $all = $('*');

// タグ名で取得
var $divs = $('div');
var $links = $('a');

// クラスで取得
var $items = $('.list-item');

// IDで取得（ページ内で一意）
var $header = $('#site-header');

// タグ+クラスの組み合わせ
var $btns = $('button.primary-btn');

// 複数セレクタ（カンマ区切り）
var $mixed = $('h1, h2, h3');

// 子孫（スペース区切り）
var $navLinks = $('nav a');  // nav内の全aタグ

// 直接の子（>）
var $directChildren = $('ul > li');  // ulの直下のliのみ

2. 属性セレクタ

// 属性が存在する要素
$('[disabled]')           // disabled属性を持つ全要素
$('[data-id]')            // data-id属性を持つ全要素

// 属性値が一致
$('[type="text"]')       // type='text'のinput等
$('[name="email"]')      // name='email'

// 属性値が前方一致
$('[href^="https"]')     // https://... のリンク
$('[src^="/images/"]')   // /images/で始まるsrc

// 属性値が後方一致
$('[href$=".pdf"]')      // .pdfで終わるリンク

// 属性値を含む
$('[class*="btn"]')      // クラスに'btn'を含む

3. 擬似クラスセレクタ

// 状態による絞り込み
$(':'checked')            // チェック済み
$(':'disabled')           // 無効化された要素
$(':'visible')            // 表示されている要素
$(':'hidden')             // 非表示の要素

// 位置による絞り込み
$('li:first')             // 最初のli（first()と同じ）
$('li:last')              // 最後のli
$('li:even')              // 偶数番目（0始まり）
$('li:odd')               // 奇数番目
$('li:nth-child(3)')      // 3番目の子要素

// テキスト内容
$(':contains("検索語")')  // テキストを含む要素
$('input:not(:checked)')  // チェックされていないinput

4. DOM走査メソッド

// 子孫を検索
$('#container').find('.item')  // #container内の全.item
$('#container').find('a')      // #container内の全リンク

// 直接の子要素
$('ul').children()             // ulの直接の子要素全て
$('ul').children('li.active')  // フィルタ付き

// 親要素
$(this).parent()               // 直接の親
$(this).parents('.wrapper')    // 祖先の中で.wrapperを全部
$(this).closest('.card')       // 最も近い祖先の.card（自分を含む）

// 兄弟要素
$(this).siblings()             // 同階層の全兄弟
$(this).siblings('.active')    // フィルタ付き
$(this).next()                 // 次の兄弟
$(this).prev()                 // 前の兄弟
$(this).nextAll()              // 後の全兄弟
$(this).prevAll()              // 前の全兄弟

5. filter()とnot()でフィルタリング

// filter(): 条件に合う要素だけ残す
$('li').filter('.active')          // .activeクラスを持つliのみ
$('input').filter('[type="text"]') // type='text'のinputのみ

// filter()に関数を渡す
$('li').filter(function () {
  return $(this).text().length > 10;  // テキストが10文字超の要素
});

// not(): 条件に合う要素を除外
$('input').not('[type="submit"]')  // submitボタン以外のinput
$('li').not('.disabled')            // .disabledでないli
$('li').not(':first')               // 最初のliを除く全て

6. パフォーマンスを考慮したセレクタ

// △ 遅い: 全要素から検索
$('.item a');

// ◯ 速い: コンテキストを絞る
$('a', '#container');       // #container内のみ検索
$('#container').find('a'); // 同上（こちらが推奨）

// △ 遅い: セレクタが複雑
$('div:not(.skip):visible:first');

// ◯ 速い: まず基本セレクタで取得してからフィルタ
$('div').not('.skip').filter(':visible').first();

// △ IDより遅い
$('.unique-class');

// ◯ IDが使える場合はIDを使う（最速）
$('#unique-id');

まとめ

jQueryのセレクタは CSS セレクタに加え、擬似クラス・属性セレクタ・走査メソッドなど多彩です。パフォーマンスを意識するなら find() でスコープを絞り、IDセレクタを優先し、複雑なセレクタはメソッドチェーンで段階的に絞り込みましょう。

関連記事: jQueryのeach()でループ処理を行う方法 / jQueryのeq()で要素の順番を指定して選択する方法

よくある質問（FAQ）