タイトル: 要素の取得
本稿は jQuery の要素の取得に関する記事です。jQuery にはセレクタで指定した要素を取得したり、要素の個数・表示位置・ある要素から見た親子兄弟の関係要素を取得するためのメソッドが多数用意されています。
子ページから個別メソッドを選択してください。
本ページの子ページ
- .find() — 子孫から条件に合う要素を取得
- .children() — 直下の子要素のみ取得
- .eq() — n 番目の要素を取得
要素取得の基本パターン
|
// 1. セレクタで取得 |
主な要素取得メソッド
| メソッド | 取得対象 | 概要 |
|---|---|---|
$(セレクタ) | マッチする要素全体 | もっとも基本 |
.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()
- 関連: セレクタ