本稿は jQuery の要素の取得に関する記事です。jQuery にはセレクタで指定した要素を取得したり、要素の個数・表示位置・ある要素から見た親子兄弟の関係要素を取得するためのメソッドが多数用意されています。

子ページから個別メソッドを選択してください。

本ページの子ページ

• .find() — 子孫から条件に合う要素を取得
• .children() — 直下の子要素のみ取得
• .eq() — n 番目の要素を取得

要素取得の基本パターン

// 1. セレクタで取得 const $btn = $(".btn"); // 2. 個数 const count = $(".item").length; // 3. n 番目 const $first = $("li").eq(0); // 4. 子孫を絞り込み const $links = $(".menu").find("a"); // 5. 直下の子のみ const $cells = $("tr").children("td");

主な要素取得メソッド

メソッド	取得対象	概要
$(セレクタ)	マッチする要素全体	もっとも基本
.find(セレクタ)	子孫要素	子・孫すべてを再帰的に
.children(セレクタ)	直下の子要素	1階層下のみ
.parent()	直近の親要素	1階層上
.parents(セレクタ)	全祖先	ルート方向に再帰
.closest(セレクタ)	自身を含む祖先で最も近いもの	イベント委譲で使用
.siblings(セレクタ)	兄弟要素	自身は含まない
.next() / .prev()	直後／直前の兄弟	1つ隣
.nextAll() / .prevAll()	以降／以前の兄弟全部	複数
.first() / .last()	集合の最初／最後	jQuery 集合の絞り込み
.eq(n)	n 番目 (0始まり)	負の値で末尾から
.filter(セレクタ)	集合から条件で絞り込み	:visible 等と併用
.not(セレクタ)	条件で除外	逆引き
.has(セレクタ)	指定子孫を持つ要素	条件付き絞り込み
.is(セレクタ)	真偽判定	条件文で使う
.length	マッチ件数 (プロパティ)	if ($x.length) { ... }
.index()	兄弟内の位置	0始まり

要素のテキスト・値・属性の取得

メソッド	用途
.text()	テキスト取得・設定
.html()	HTML 文字列の取得・設定 (XSS 注意)
.val()	input / select / textarea の値
.attr(name)	属性 (href、title 等)
.prop(name)	プロパティ (checked、disabled 等)
.data(name)	data-* 属性
.css(name)	計算済みCSS値
.position() / .offset()	位置 (親基準 / 文書基準)
.width() / .height()	サイズ

典型的なユースケース

• ボタンクリックで最も近いカードを取得: $(this).closest(".card")
• テーブルの行ごとに値合計: $("tr").each(function() { ... })
• フォーム入力値の取得: $("#email").val()
• 表示中のメニューだけ閉じる: $(".menu:visible").hide()

注意点

• 取得結果は常に jQuery オブジェクト。生の DOM が必要なら $x[0] または $x.get(0)
• 0件でもエラーにはならない (.length をチェック)
• 動的に追加された要素は再取得が必要 (キャッシュは無効化)
• セレクタが重い ($("*") 等) と速度が落ちる。範囲を限定する
• 新規プロジェクトでは document.querySelector / querySelectorAll + 標準 DOM API で十分なことが多い

関連

• 親カテゴリ: jQuery
• 子ページ: .find() / .children() / .eq()
• 関連: セレクタ