Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター

2016年2月18日

jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:id値/タグ名/クラス名で特定の要素を取り出すには?」では、基本セレクターを利用した要素の検索について解説しました。本稿では、引き続きフィルター構文を利用して、取得した要素セットを、特定の条件で絞り込む方法について解説します。フィルターは、これまでに紹介したセレクターの末尾に:フィルターの形式で付与します。

1先頭/末尾の要素を取得する

 :first:lastフィルターを利用することで、取得した要素セットから先頭/末尾の要素だけを取り出せます。

 例えば以下は、選択ボックスの選択肢(<option>要素)から先頭/末尾のものだけを取り出し、背景色を付与する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<select name="book">
  <option value="">--<書籍を選択してください>--</option>
  <option value="docker">プログラマのためのDocker教科書</option>
  <option value="js">JavaScript逆引きレシピ</option>
  <option value="android">アプリを作ろう! Android入門</option>
  <option value="jq">10日でおぼえるjQuery入門教室 第2版</option>
  <option value="ecma">速習 ECMAScript 6</option>
</select>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $('option:first').css('background-color', 'Yellow');
  $('option:last').css('background-color', 'Lime');
});
</script>
</body>
</html>
リスト1 先頭の要素だけを取り出すコード(first.html)
図1 先頭/末尾の<option>要素に背景色を付与
図1 先頭/末尾の<option>要素に背景色を付与

2偶数/奇数番目の要素を取得する

 :even:oddフィルターを利用することで、取り出した要素セット内の偶数/奇数番目の要素を取り出せます。

 例えば以下は、選択ボックスの選択肢(<option>要素)から偶数/奇数番目のものだけを取り出し、背景色を付与する例です。

JavaScript
$(function() {
  $('option:even').css('background-color', 'Yellow');
  $('option:odd').css('background-color', 'Lime');
});
リスト2 偶数番目の要素だけを取り出すコード(even.html)
図2 偶数/奇数番目の<option>要素にそれぞれ異なる背景色を付与
図2 偶数/奇数番目の<option>要素にそれぞれ異なる背景色を付与

 ただし、要素の順序は、先頭を0番目と数える点に注意してください。よって、先頭は偶数番目なので、背景色も黄色になります。

3n番目の要素を取得する

 :eq(index)フィルターを利用することで、index番目の要素を取り出せます。先ほどと同じく、先頭要素は0番目と数える点に注意してください。

 例えば以下は3番目の選択肢(<option>要素)だけに背景色を付与する例です。

JavaScript
$(function() {
  $('option:eq(2)').css('background-color', 'Yellow');
});
リスト3 n番目の要素だけを取り出すコード(eq.html)
図3 3番目の<option>要素に背景色を付与
図3 3番目の<option>要素に背景色を付与

 ちなみに、後方からn番目の要素を取り出したいならば、eqフィルターに負数を渡します。この場合、末尾の要素を-1番目とします。

 以下であれば、末尾から2番目の要素に背景色を付与します。

JavaScript
$(function() {
  $('option:eq(-2)').css('background-color', 'Yellow');
});
リスト4 末尾からn番目の要素だけを取り出すコード(eq.html)
図4 末尾から2番目(-2番目)の<option>要素に背景色を付与
図4 末尾から2番目(-2番目)の<option>要素に背景色を付与

4n番目の要素よりも前方/後方の要素を取得する

 :lt(index):gt(index)フィルターを利用することで、それぞれindex番目よりも前方/後方の要素を取得できます。ltはless than(より小さい)、gtはgreater than(より大きい)の略です。

 例えば以下は、3番目の<option>要素を境として、その前後の要素にそれぞれ異なる背景色を付与します。

JavaScript
$(function() {
  $('option:lt(2)').css('background-color', 'Yellow');
  $('option:gt(2)').css('background-color', 'Lime');
});
リスト5 n番目の要素の前方/後方の要素を取り出すコード(lt.html)
図5 3番目未満の要素を黄色に、4番目以上の要素をライム色に着色
図5 3番目未満の要素を黄色に、4番目以上の要素をライム色に着色
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:基本フィルター カテゴリ:セレクター
API::firstフィルター|:lastフィルター|:oddフィルター|:evenフィルター|:eq()フィルター|:lt()フィルター|:gt()フィルター カテゴリ:Selectors(セレクター) > Basic Filter(基本フィルター)

※以下では、本稿の前後を合わせて5回分(第37回~第41回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
37. 属性値で目的の要素を絞り込むには? ― 属性フィルター

jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。

jQuery逆引きリファレンス
38. 親子/兄弟関係にある要素を取り出すには? ― 階層セレクター

jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。

jQuery逆引きリファレンス
39. 【現在、表示中】≫ 登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター

jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明する。

jQuery逆引きリファレンス
40. 子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター

:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できる。

jQuery逆引きリファレンス
41. 子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説。

サイトからのお知らせ

Twitterでつぶやこう!