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

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

インデックス値で特定

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

条件に一致したエレメント(element)の削除

[js]
$(element).not(セレクタ);
$(element).not(element);
$(element).not(function(){処理});
[/js]
elementの集まりとして渡されたjQueryオブジェクトから条件に一致するelementを取り除いて、新たにelementを入れます。

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

[js]
$(要素).has(セレクタ);
[/js]
要素の集まりとして渡されたjQueryオブジェクトからじょうけんにマッチする子ノードを有する要素を取り出し、新しいjQueryオブジェクトを作って返します。

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

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

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

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

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

[js]
$(要素).filter(セレクタ);
$(要素).filter(function()){処理}
[/js]
jQueryオブジェクトが保有する要素の集まりからじょうけんにマッチする要素のみ取り出し、新しくjQueryオブジェクトを作って渡します。

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

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

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

[js]
$(要素).siblings(セレクタ);
[/js]
引数を省くと、兄弟要素の全てを取り出し、記述すれば条件に応じた結果が返されます。いずれもスキャンのじょうけんにマッチした要素そのものは省かれます。

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

[js]
$(element).parent(セレクタ);
$(element).parents(セレクタ);
[/js]
引数を未設定にすると親elementを全て取得します。記入すればフィルタリングされた結果の親elementを抽出します。.parent()は直属の親elementのみ抽出し、.parents()はフィルタリングされないと先祖のelement全てを返してきます。いずれもじょうけんにマッチしたelement自体は含まれません。

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

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

要素(element)の前後の兄弟elementを抽出

[js]
$(element).prevAll(セレクタ);
$(element).nextAll(セレクタ);
[/js]
.prevAll()は前、.nextAll()は後ろの兄弟elementを全部取り出します。引数で更にフィルタリングできます。

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

[js]
$(element).prevUntil(セレクタ);
$(element).nextUntil(セレクタ);
[/js]
前者が前、後者が後ろの兄弟elementを全て取得します。また、スキャンを停止させるための条件をセレクタに指定できます。取得した結果には、じょうけんにマッチしたelementの直前までしか含まれず、停止条件に一致したelement自体は含まれません。

一番近くの条件に一致する親エレメントを取得

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

条件に一致するエレメントを子孫からスキャン

[js]
$(エレメント).find(セレクタ);
[/js]
子孫の階層を全てをスキャンし、その結果を返します。これに対し.children()では直下の子エレメントのみが対象となっています。

一番近い配置済みの親エレメントを抽出

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

エレメント集合にエレメントを追加

[js]
$(エレメント).add(セレクタ);
$(エレメント).add(エレメント);
$(エレメント).add(HTML);
[/js]
受け取ったjQueryオブジェクトに、引数から得られたエレメントを加えます。セレクタ、DOMエレメント、HTMLを引数に指定できます。

エレメントの子ノードからテキストノードも含めて取得

[js]
$(エレメント).contents();
[/js]
じょうけんにマッチするエレメントからテキストノードを含む子ノードを全部取り出します。これに対し、.children()メソッドではテキストノードは含まれません。

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

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

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

[js]
※v1.8で非推奨。
$(element).andSelf();
[/js]
このメソッドが実行される直前のjQueryオブジェクトと、その一つ前のjQueryオブジェクトを結合して一つにします。