jQuery入門 | 要素の探索 | フィルタリングメソッド .first() .last() .eq() .filter() .not() .is()

Tags:

フィルタリングメソッド

DOMツリーで選択した要素をフィルタリングするためのメソッドは次のとおりである。

メソッド 説明
.first() 選択した要素のうち、最初の要素を選択する。
.last() 選択した要素のうち、最後の要素を選択する。
.eq() 選択した要素のうち、渡されたインデックスに該当する要素を選択する。
.filter() 選択した要素のうち、渡されたセレクターに該当する、または関数呼び出しの結果がtrueである要素をすべて選択する。
.not() 選択した要素のうち、渡されたセレクターに該当する、または関数呼び出しの結果がtrueである要素を除いた残りの要素をすべて選択する。
.has() 選択した要素のうち、渡されたセレクターに該当する要素を子孫要素として持つ要素をすべて選択する。
.is() 選択した要素のうち、渡されたセレクターに該当する要素が1つでも存在すればtrueを返す。
.map() 選択した要素集合の各要素ごとにコールバック関数を実行し、その戻り値で構成されたjQueryオブジェクトを返す。
.slice() 選択した要素のうち、渡されたインデックス範囲に該当する要素だけを選択する。

.first()メソッドと.last()メソッド

.first()メソッドは選択した要素のうち最初の要素を選択し、.last()メソッドは最後の要素を選択する。

$("li").first().css("background-color", "red");
$("li").last().css("background-color", "yellow");

コードを実行

上の例では、最初の要素のCSSプロパティが"red"に設定され、最後の要素のCSSプロパティが"yellow"に設定される。

.eq()メソッド

.eq()メソッドは、選択した要素のうち、渡されたインデックスに該当する要素を選択する。 インデックスは選択された要素の最初の要素をインデックス0として、前から検索される。 インデックスが負数の場合は、選択した要素集合の最後の要素をインデックス-1として、後ろから検索される。

$("li").eq(0).css("background-color", "red");
$("li").eq(-1).css("background-color", "yellow");

コードを実行

上の例では、インデックス0に該当する最初の要素のCSSプロパティが"red"に設定され、インデックス-1に該当する最後の要素のCSSプロパティが"yellow"に設定される。

.filter()メソッド

.filter()メソッドは、選択した要素のうち、渡されたセレクターに該当する、または関数呼び出しの結果がtrueである要素をすべて選択する。

このメソッドは、引数としてセレクター、jQueryオブジェクト、HTML DOM要素などを受け取ることができる。 また、要素集合の各要素をチェックできる関数を渡すこともできる。

$("li").filter(":odd") .css("background-color", "yellow");

コードを実行

上の例で使用された:oddセレクターは、インデックスが奇数の要素をすべて選択するセレクターなので、2番目と4番目の要素が選択される。

ここで注意すべき点は、jQueryのインデックスは常に0から始まるということである。 したがって、:oddや:evenセレクターを使用するときは、常にインデックスが0から始まる事実を念頭に置いて使う必要がある。

.not()メソッド

.not()メソッドは、選択した要素のうち、渡されたセレクターに該当する、または関数呼び出しの結果がtrueである要素を除いた残りの要素をすべて選択する。 つまり、.filter()メソッドとは正反対に動作して要素が選択される。

$("li").not(":odd").css("background-color", "yellow");

コードを実行

上の例で使用された:oddセレクターは、インデックスが奇数の要素をすべて選択するセレクターなので、2番目と4番目の要素とは反対の要素が選択される。

.has()メソッド

.has()メソッドは、選択した要素のうち、渡されたセレクターに該当する要素を下位要素として持つ要素をすべて選択する。

$("li").has("b").css("background-color", "yellow");

コードを実行

上の例は、選択した<li>要素のうち、下位要素として<b>要素を持つ要素だけのCSSプロパティを変更する。

.is()メソッド

.is()メソッドは、選択した要素のうち、渡されたセレクターに該当する要素が1つでも存在すればtrueを返す。

if ($("b").parents().is("ul")) {
  $("p").text("<b>要素の上位要素として<ul>要素が存在します。");
}

コードを実行

上の例では、まず選択した<b>要素の上位要素を選択し、選択された上位要素の中に<ul>要素が存在するかどうかを.is()でチェックしている。

.map()メソッド

.map()メソッドは、選択した要素集合の各要素ごとに指定されたコールバック関数を実行し、その戻り値で構成されたjQueryオブジェクトを返す。

var val = $("li").map(function() {
  return $(this).html();
})
.get()   // 返された値を配列として返す。
.join(", "); // 配列のすべての要素をカンマ（,）で区切って文字列として返す。
$("p").html(val);

コードを実行

上の例は、選択した<li>要素の各要素ごとに、その要素のHTML値を返すコールバック関数を実行する。 コールバック関数の実行によって返される値は、.get()メソッドを通じて配列として返され、さらに.join()メソッドを通じて文字列として返される。

.slice()メソッド

.slice()メソッドは、選択した要素のうち、渡されたインデックス範囲に該当する要素だけを選択する。

$("li").slice(2).css("background-color", "yellow");
$("li").slice(1, 3).css("border", "2px solid green");

コードを実行

上の例は、1行目では選択した<li>要素のうちインデックスが2以上の要素だけのCSSプロパティを変更し、2行目では選択した<li>要素のうちインデックスが1以上3未満の要素だけのCSSプロパティを変更する。

参照