jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素セットからn番目の要素を取得するには?(eq)

2017年8月10日

jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。

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

 eqメソッドを利用することで、現在の要素セットから指定されたインデックス番号に対応する要素だけを取り出せます。インデックス番号は、一般的な配列と同じくゼロスタートです。

 具体的な例も見てみましょう。以下は、全ての<div>要素に対して枠線を設定した後、3番目(インデックス番号2)の<div>要素にだけ水色の背景色を適用した例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
.box {
  height:30px;
  width:30px;
  float:left;
  margin-left:20px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
  $('div').
    css('border', 'solid 1px').        // 枠線を設定
    eq(2).    // 3番目の要素に絞り込み
    css('background-color', '#0ff');   // 背景色を設定
});
</script>
</body>
</html>
eqメソッドで特定の要素を取得するコード(eq.html)
全ての<div>要素に枠線を、3番目の<div>要素にだけ背景色を適用
全ての<div>要素に枠線を、3番目の<div>要素にだけ背景色を適用

 eqメソッドには、負数を指定することもできます。その場合、末尾の要素のインデックスを-1として数えます。以下は、上のリストを、負数を使って書き換えた例です。

JavaScript
$(function() {
  $('div').
    css('border', 'solid 1px').
    eq(-3).
    css('background-color', 'Yellow');
});
eqメソッドに負数を与える例

 果たして、後方から3番目<div>要素――つまり、前から3番目<div>要素に背景色が付くことが確認できます。

処理対象:指定インデックスで選択 カテゴリ:トラバーシング(選択系の操作)
API:.eq() カテゴリ:Traversing(トラバーシング) > Filtering(フィルタリング)

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

72. 現在の要素から指定された祖先/兄弟要素までを取得するには?(prevUntil/nextUntil/parentsUntil)

prevUntil/nextUntil/parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において(指定された)兄/弟/親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。

73. 要素セットの内容を順に処理するには?(map)

jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。

74. 要素セットから指定の条件に合致したものを取り除くには?(not)

jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。

75. 現在の要素セットからm~n番目の要素を取得するには?(slice)

jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。

76. 【現在、表示中】≫ 要素セットからn番目の要素を取得するには?(eq)

jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社