jQueryで要素を絞りこみたい時に使う関数一覧

例えば、以下のようなソースコードがあるとします。

<ul id="List">
	<li>1</li>
	<li class="red">2</li>
	<li>3</li>
	<li><span class="red">4</span></li>
	<li class="red">5</li>
	<li>6</li>
</ul>
<!-- /#List -->

$(function() {
  var $list  = $('#List');
  var $items = $list.find('li');
});

このように、「$items」にul#List内のli要素が入っているような状況で、「redクラスがついている要素だけ取り出したい」「〜番目の要素を取り出したい」といったような、「もっと要素を条件によって絞り込みたい」って時が結構あります。

今回はそういう場合に使える関数をご紹介したいと思います。

順番による絞込

first/last

最初、又は最後の要素を取り出したい場合に使う関数です。

// 最初の要素を取り出す
var $first_item = $items.first();

// 最後の要素を取り出す。
var $last_item = $items.last();

eq(n)

n番目の要素を取り出したい場合に使う関数です。

// 3番目の要素を取り出す
var $third_item = $items.eq(2);

3番目なのに2を指定しているのは間違いではありません。eqの引数は0オリジン（0が最初の要素と対応）なので3番目の要素を取り出したい場合は2を指定する必要があります。

slice(start, end)

start番目からend番目までの要素を取り出す場合に使う関数です。

// 3~5番目の要素を取り出す
var $new_items = $items.slice(2, 4);

sliceもeqと同様0オリジンなので注意しましょう。

CSSセレクタによる絞込

filter(selector)/not(selector)

「〜のクラスを持っている（持っていない）要素を取り出す」といったCSSセレクタによる絞込をしたい場合はfilter/not関数を使います。

var $red_items = $items.filter('.red');

var $notred_items = $items.not('.red');

この関数に関して注意しておきたいのが、「その要素自身がセレクタで指定した条件に適合するかどうか」で抽出されるかどうか判断される点です。（子孫要素が条件を満たそうが関係ないということです）

今回の例で言うと、liタグ自身が「.red」クラスを持っているかどうかで判断されます。なので、4番目のliタグは子要素にspan.redを持っていますが、liタグ自身にはredクラスが付いていないのでfilterではなく、notでの抽出対象となります。

子孫要素の有無による絞込

has(selector)

filter/notのパターンとは逆に、「子孫要素がセレクタに適合するかどうか」で抽出の判断がされるパターンです。

var $hasred_items = $items.has('.red');

filter/notの時とは異なり、liタグがredクラスを持っていようが関係なく、子孫要素がredクラスを持っているかどうかで判断されますので4番目のspan.redを子要素として持っているliタグのみが抽出対象となります。

以上

「更にこの条件で絞り込みたい」という状況が忘れた頃にやってきて、その度に調べ直すことがよくあるので今回まとめなおしてみました。

以上、たにっぱでした〜