【jQueryレッスン】色々なフィルタを使って要素の絞り込みをしよう！！

ここでは、フィルタと呼ばれる選択した要素をさらに絞り込むときに使う選択方法を学んでいきましょう。
CSSにも疑似クラスと呼ばれる同じような機能がありますが、jQueryではもっと種類が多く様々なアプローチから要素を選択する事ができます。

基本フィルタ

jQueryのフィルタの中でも基本的なフィルタを解説していきます

:first

先頭の要素を選択

$(“:first“)
マッチした要素全ての中で一番最初だけを選択します。

先頭の要素を選択します。
マッチした要素全ての中で一番最初だけを選択しますので、少し注意が必要です。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 一番最初に出てくるpタグを選択します。
	$("p:first").css("color","red");
});
</script>

<!-- HTML -->
<h5>タイトル</h5>
<p>赤色を表示します</p>
<p>色は変わりません</p>
<div>
	<p>色は変わりません</p>
</div>

実行結果

実行結果からわかるように、この例でマッチした要素は3つほどありますが、色が変わるのは最初にマッチした要素だけです。
もし、divタグの中にある最初のpタグだけ選択したいというときには、後ほど解説する :first-childを使用します。

:last

末尾の要素を選択

$(“:last“)
マッチした要素全ての中で一番最後だけを選択します。

末尾の要素を選択します。
:firstが末尾の選択に変わるだけです。仕様は :firstを参考にしてください。

:not(セレクタ)

指定したセレクターを除外

$(“:not(セレクタ)“)
（）内のセレクターを除外します。

要素集合から指定したセレクターの要素を除外します。
:notで指定したほうが簡潔に記述できる事もありますので、その場合はこちらを使いましょう。
同じような効果をもつ.not()というメソッドもありますが、メソッドについては別の機会に説明します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 一番最初に出てくるpタグを選択します。
	$("p:not(:first)").css("color","red");
});
</script>

<!-- HTML -->
<h5>タイトル</h5>
<p>色は変わりません</p>
<p>赤色になります</p>
<div>
	<p>赤色になります</p>
</div>

実行結果

:even、:odd

偶数番目（:even）、奇数番目（:odd）を選択

$(“:even“)、$(“:odd“)
0から数えますので最初にマッチした要素から偶数（0）となります。

セレクターでマッチした要素からインデックスが偶数（:even）、奇数（:odd）のものを選択します。
気をつけなければいけないのが、CSSと違いjQueryの場合は0から数えますので、最初の要素が偶数として認識されます。通常の認識とは逆になるので注意しましょう。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // 偶数の指定ですが、1, 3, 5行目(jQueryでは0, 2, 4)に適用されます。
    $("table tr:even").css("background","#ccc");
    
    // 奇数の指定ですが、2, 4, 6行目（jQueryでは1, 3, 5）に適用されます。
    $("table tr:odd").css("color","red");	
    
});
</script>
 
<!-- HTML -->
<table>
	<tr>
		<td>No.1</td>
		<td>りんご</td>
	</tr>
	<tr>
		<td>No.2</td>
		<td>バナナ</td>
	</tr>
	<tr>
		<td>No.3</td>
		<td>みかん</td>
	</tr>
	<tr>
		<td>No.4</td>
		<td>イチゴ</td>
	</tr>
	<tr>
		<td>No.5</td>
		<td>メロン</td>
	</tr>
	<tr>
		<td>No.6</td>
		<td>ぶどう</td>
	</tr>
</table>

実行結果

ご覧の通り、見た目は奇数行ですが:evenが適用され背景が灰色に、偶数行に:oddが適用され文字色が赤くなっています。
後に説明する:nth-child()は1から数えますので、混乱しないよう気をつけてください。

:eq(index)、:gt(index)、:lt(index)

インデックス指定した要素一つを選択

$(“:eq(index)“)
最初にマッチした要素が0です。

指定したインデックスより後の要素を選択

$(“:gt(index)“)
最初にマッチした要素が0です。

指定したインデックスより前の要素を選択

$(“:lt(index)“)
最初にマッチした要素が0です。

セレクターでマッチした要素から、それぞれ上記のように選択します。
これも、:evenや:oddのように最初の要素を0から数えますので、間違えないように注意が必要です。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // 指定したインデックスの要素のみを選択。今回はNo.3の行を選択してます。
    $("table tr:eq(2)").css("background","#ccc");
    // 指定したインデックスより後の要素を全て選択。No.4の行以降を選択してます。
    $("table tr:gt(2)").css("color","red");	
    // 指定したインデックスより前の要素を全て選択。No.2の行以前を選択してます。
    $("table tr:lt(2)").css("color","blue");
});
</script>
 
<!-- HTML -->
<table>
	<tr>
		<td>No.1</td>
		<td>りんご</td>
	</tr>
	<tr>
		<td>No.2</td>
		<td>バナナ</td>
	</tr>
	<tr>
		<td>No.3</td>
		<td>みかん</td>
	</tr>
	<tr>
		<td>No.4</td>
		<td>イチゴ</td>
	</tr>
	<tr>
		<td>No.5</td>
		<td>メロン</td>
	</tr>
	<tr>
		<td>No.6</td>
		<td>ぶどう</td>
	</tr>
</table>

実行結果

少しややこしい選択の仕方ですので、まずは:eq(index)を理解しておけば問題ないでしょう。

:header

h1～h6までのhタグを選択

$(“:header“)

h1～h6までのhタグを選択します。
あまり使うことは無いのですが、紹介しておきます。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // h1～h6までのhタグを選択してます。
    $(":header").css("color","red");
});
</script>
 
<!-- HTML -->
<h4>見出し４です</h4>
<p>段落です</p>

<div>
	<h5>見出し５です</h5>
</div>
<h6>見出し６です</h6>

実行結果

:animated

アニメーション中の要素を選択

$(“:animated“)

アニメーション中の要素を選択します。
サイトコンテンツの中でアニメーションするようなコンテンツ（スライダー、フェード）を利用するときに役に立ちます。
アニメーションに関しては別の機会に詳しく説明しますので、簡単な例を紹介します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // ボタンをクリックするとフェードして、表示・非表示します。
    $("button:first").on("click", function(){
    	// 最初のボタンは連続でクリックすると、何度もアニメーションを繰り返してしまいます。
    	$("#anime").fadeToggle("slow", "linear");
    })
    
    $("button:last").on("click", function(){
    	// 最後のボタンは連続でクリックしても、アニメーションが終わった後であれば処理を開始します。
    	$("#anime:not(:animated)").fadeToggle("slow", "linear");
    })
    
});
</script>
 
<!-- HTML -->
<button>Fade Start 1</button>
<button>Fade Start 2</button>

<p id="anime">最初のボタンは連続でクリックすると、何度もアニメーションを繰り返してしまいますので、不具合になる動作になることがあります。</p>

実行結果

上記のように、ボタンやマウス操作によってアニメーションをする場合に、何度も繰り返し動作してしまうと困る場合などは:notと:animatedを複合して「アニメーションしていない要素｣という選択をすると問題を解消できる場合があります。

アニメーションについてはもっと深堀りをして別の機会に説明します。

コンテントフィルタ

要素の中身に対してフィルターをかける場合に使用します。

:contains(文字列)

引数の文字列を含む要素を選択

$(“:contains(文字列)“)

:contains(文字列)は（）内の文字列を含む要素を選択します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // 引数の文字列（です）を含む要素を選択
    $("p:contains('です')").css("color", "red");
    
});
</script>
 
<!-- HTML -->
<p>こんにちは！</p>
<p>明日は晴れですか？</p>
<p>そうですね。</p>
<p>お疲れ様です。</p>

実行結果

:has(セレクタ)

指定セレクターを子孫に持つ要素を選択

$(“:has(セレクター)“)

引数で渡されたセレクターを子孫に持つ要素を選択します。
ここで指定したセレクターは直接の子要素でなくても選択されます。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // 引数のセレクタを含む要素を選択
    $("div:has(span)").css("border", "1px solid red");
    
});
</script>
 
<!-- HTML -->
<div>こんにちは！</div>
<div>明日は<span>晴れ</span>です。</div>

<div>
	<p>直接の子供でなくても<span>選択</span>されます。</p>
</div>

実行結果

:empty、:parent

何も持たない要素を選択

$(“:empty“)
何も持たないとはテキストも含みます。

何かしらの要素を持つ要素を選択

$(“:parent“)
何かしらの要素とはテキストも含みます。

:emptyは、何も子要素を持たない要素を選択します。
:parentは、何か子要素を持つ要素を選択します。
ここでの子要素は、単なるテキストも含みます。

:emptyは:parentと逆の選択方法だと思ってください。

<!-- Script -->
<script>
jQuery(document).ready(function($){
    // 何も持たない要素は赤
    $("td:empty").css("background", "red");
    // 何か持つ要素は青
    $("td:parent").css("background", "aqua");
});
</script>
 
<!-- HTML -->
<table>
	<tr>
		<td>青です</td>
		<td></td>
		<td>青です</td>
	</tr>
	<tr>
		<td></td>
		<td>青です</td>
		<td></td>
	</tr>
</table>

実行結果