スキャン系のメソッドによる条件指定、抽出

セレクタのような要素にマッチさせる機能は、メソッドにもあります。

インデックス値で特定

JS
1
2
3
<script>
$(要素).eq(インデックス番号);
</script>
インデックス値は、出現した順番に0から割り当てられる整数値を言います。.eq(インデックス番号)とすると出現順にインデックス番号が割り振られ、一致したインデックス番号とマッチします。.eq(-インデックス番号)のようにマイナスを記入するとドキュメントの下から数えて割り当てられ、その値で判定されます。つまり出現順の逆順になります。

条件に一致した要素の削除

JS
1
2
3
4
5
<script>
$(要素).not(セレクタ);
$(要素).not(要素);
$(要素).not(function(){処理});
</script>
要素の集まりとして渡されたjQueryオブジェクトから条件に一致する要素を取り除いて、新たに要素を入れます。

条件に一致する子ノードを保有する要素の集まりを取得

JS
1
2
3
<script>
$(要素).has(セレクタ);
</script>
要素の集まりとして渡されたjQueryオブジェクトから条件に一致する子ノードを有する要素を取り出し、新しいjQueryオブジェクトを作って返します。

それぞれの要素を関数に渡して処理

JS
1
2
3
<script>
$(要素).map(コールバック関数);
</script>
それぞれの要素が保有する色んな値を取り出して、新しいjQueryオブジェクトを作ります。

インデックス番号を使って範囲指定でスライス

JS
1
2
3
<script>
$(要素).slice(開始インデックス番号, 終了インデックス番号);
</script>
終了インデックス番号である第二引数を省略した場合、開始インデックスの要素から最後の要素まで取り出します。第二引数を指定した場合、終了インデックの直前の要素まで取り出します。また、インデックス番号にマイナスを設定した場合、各要素集合の後ろから順番に判断されます。

条件に一致する要素を取り出す

JS
1
2
3
4
<script>
$(要素).filter(セレクタ);
$(要素).filter(function()){処理}
</script>
jQueryオブジェクトが保有する要素の集まりから条件に一致する要素のみ取り出し、新しくjQueryオブジェクトを作って渡します。

要素集合から子要素を取り出す

JS
1
2
3
<script>
$(要素).children(セレクタ);
</script>
引数を省略した場合は、子要素の全てを取得し、指定すれば一致する子要素を取り出します。いずれも親要素は省かれます。

条件に一致した要素の兄弟要素を取り出す

JS
1
2
3
<script>
$(要素).siblings(セレクタ);
</script>
引数を省くと、兄弟要素の全てを取り出し、記述すれば条件に応じた結果が返されます。いずれもスキャンの条件に一致した要素そのものは省かれます。

条件に一致した要素の親要素を取り出す

JS
1
2
3
4
<script>
$(要素).parent(セレクタ);
$(要素).parents(セレクタ);
</script>
引数を未設定にすると親要素を全て取得します。記入すればフィルタリングされた結果の親要素を抽出します。.parent()は直属の親要素のみ抽出し、.parents()はフィルタリングされないと先祖の要素全てを返してきます。いずれも条件に一致した要素自体は含まれません。

条件に一致した要素の親要素の範囲を絞って取り出す

JS
1
2
3
<script>
$(要素).parentUntil(セレクタ);
</script>
要素の親要素を取得しますが、取り出す条件を停止させるセレクタを指定できます。指定しない場合や指定しても条件に全く一致しない場合はhtml要素までさかのぼって親要素の全てを返します。

要素の前後の兄弟要素を抽出

JS
1
2
3
4
<script>
$(要素).prevAll(セレクタ);
$(要素).nextAll(セレクタ);
</script>
.prevAll()は前、.nextAll()は後ろの兄弟要素を全部取り出します。引数で更にフィルタリングできます。

範囲を絞って要素前後の兄弟要素を取り出す

JS
1
2
3
4
<script>
$(要素).prevUntil(セレクタ);
$(要素).nextUntil(セレクタ);
</script>
前者が前、後者が後ろの兄弟要素を全て取得します。また、スキャンを停止させるための条件をセレクタに指定できます。取得した結果には、条件にマッチした要素の直前までしか含まれず、停止条件に一致した要素自体は含まれません。

一番近くの条件に一致する親要素を取得

JS
1
2
3
4
<script>
$(要素).closest(セレクタ);
$(要素).closest(セレクタ, コンテキスト);
</script>
.closest(セレクタ)は、一致した部分の要素から一番近くで、セレクタ条件にマッチする要素をjQueryオブジェクトとして返します。.parents()は一つ上の親要素からスキャンしますが、.closest(セレクタ)では、一致した要素自体からスキャンします。.closest(セレクタ, コンテキスト)の書式では、一致した要素とセレクタを配列として返してきます。

条件に一致する要素を子孫からスキャン

JS
1
2
3
<script>
$(要素).find(セレクタ);
</script>
子孫の階層を全てをスキャンし、その結果を返します。これに対し.children()では直下の子要素のみが対象となっています。

一番近い配置済みの親要素を抽出

JS
1
2
3
<script>
$(要素).offsetParent();
</script>
動的配置のページでよく使われるメソッドです。またスタイルシートにおけるpositionプロパティが「relative」「absolute」「fixed」の要素で一番近い場所に存在するものを返してきます。

要素集合に要素を追加

JS
1
2
3
4
5
<script>
$(要素).add(セレクタ);
$(要素).add(要素);
$(要素).add(HTML);
</script>
受け取ったjQueryオブジェクトに、引数から得られた要素を加えます。セレクタ、DOM要素、HTMLを引数に指定できます。

要素の子ノードからテキストノードも含めて取得

JS
1
2
3
<script>
$(要素).contents();
</script>
条件に一致する要素からテキストノードを含む子ノードを全部取り出します。これに対し、.children()メソッドではテキストノードは含まれません。

一つ前のjQueryオブジェクトを返す

JS
1
2
3
<script>
$(要素).end();
</script>
直前のフィルター操作が行われる前の状態のjQueryオブジェクトが返されるため、メソッドチェーンで処理以前の状態に戻したい場合に便利です。

一つ前のjQueryオブジェクトを結合

JS
1
2
3
4
<script>
※v1.8で非推奨。
$(要素).andSelf();
</script>
このメソッドが実行される直前のjQueryオブジェクトと、その一つ前のjQueryオブジェクトを結合して一つにします。