jQuery

【jQuery】最初・最後・n番目・偶数・奇数の要素を取得する方法

本記事では、jQueryで最初・最後・n番目・偶数・奇数の要素を取得する方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

サンプルコード

以降の解説では、下記のHTMLを使用します。自分のパソコンでコードを実行させながら確認したい人は下記のコードをコピペしてお使いください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
      <li>リスト5</li>
      <li>リスト6</li>
      <li>リスト7</li>
    </ul>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

一番最初の要素のみを取得する

一番最初の要素のみを取得したい時は、first()メソッドを使います。使い方は以下のとおりです。

$("要素名").first();

サンプルコードを使った実行結果は以下のとおりです。

const $elem = $("li").first();
$elem.css("color", "red");

一番最後の要素のみを取得する

一番最後の要素のみを取得したい時は、last()メソッドを使います。使い方は以下のとおりです。

$("要素名").last();

サンプルコードを使った実行結果は以下のとおりです。

const $elem = $("li").last();
$elem.css("color", "red");

n番目の要素を取得する

n番目の要素のみを取得したい時は、eq()メソッドまたは:nth-child()を使います。使い方は以下のとおりです。

$("要素名").eq(n);
$("要素名:nth-child(n)");

サンプルコードを使った実行結果は以下のとおりです。

const $elem1 = $("li").eq(3);
$elem1.css("color", "red");

const $elem2 = $("li:nth-child(5)");
$elem2.css("color", "blue");

実行結果を確認すると、eq()メソッドで指定した位置がズレているように見えます。これはeq()メソッドが先頭の要素を1ではなく「0」と捉えるため、一つずれる結果となります。

偶数・奇数の要素を取得する

偶数の要素のみを取得したい時は:evenを使い、奇数の要素のみを取得したい場合は:oddを使います。しかし、:evenと:oddは先程紹介したeq()メソッドと同様に先頭の要素を1ではなく0と捉えるため、一つずれる結果となります。

偶数と奇数が一つずれてしまったら、プログラム側で設定している内容と表示が真逆の結果となってしまいとても分かりづらいです。そこで、nth-child()と:event/:oddを組み合わせることで、意図した表示結果にさせることができるのでその方法を紹介します。使い方は以下のとおりです。

/* ↓偶数の取得 */
$("要素名:nth-child(even)");

/* ↓奇数の取得 */
$("要素名:nth-child(odd)");

サンプルコードを使った実行結果は以下のとおりです。

const $evenElem = $("li:nth-child(even)");
$evenElem.css("color","red");

const $oddElem = $("li:nth-child(odd)");
$oddElem.css("color","blue");

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村