【jQuery】first()を使って最初の要素を取得する！

最初の要素を取得するにはjQueryのfirst()を使用します。

jQueryのfirst()とは指定した要素の最初の要素を取得するメソッドとなります。

また、最初の要素は擬似クラスの:firstでも取得ですることはできますが、jQueryで最初の要素を取得するメソッドはfirst()になりますので、jQueryで指定要素の最初の要素を取得する場合はfirst()を使用するようにしましょう。

今回は、jQueryのfirst()を使って最初の要素を取得する方法について以下の内容で解説していきます。

目次
first()とは
first()の書き方
最初の要素を取得するサンプルコード
:firstで最初に一致した要素だけを取得する方法
今回のポイント
first()で最初の要素を取得
関連記事

ハルトさん

今回はjQueryのfirst()で最初の要素を取得する方法について説明していきます。

さとみさん

はい！
お願いします！

first()とは

first()とは指定した要素の最初の要素を取得するメソッドとなります。

first()の書き方

first()の書き方は下記となります。

$("セレクタ").first();

1

$("セレクタ").first();

$の()にセレクタを指定し、first()を呼び出すことで、セレクタの最初の要素を取得することができます。

最初の要素を取得するサンプルコード

first()で最初の要素を取得するサンプルコードを紹介します。

sample.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>最初の要素を取得する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th>月</th> <th>month</th> </tr> <tr> <td>1月</th> <td>January</td> </tr> <tr> <td>2月</td> <td>February</td> </tr> <tr> <td>3月</td> <td>March</td> </tr> <tr> <td>4月</td> <td>April</td> </tr> <tr> <td>5月</td> <td>May</td> </tr> <tr> <td>6月</td> <td>June</td> </tr> <tr> <td>7月</td> <td>July</td> </tr> <tr> <td>8月</td> <td>August</td> </tr> <tr> <td>9月</td> <td>September</td> </tr> <tr> <td>10月</td> <td>October</td> </tr> <tr> <td>11月</td> <td>November</td> </tr> <tr> <td>12月</td> <td>December</td> </tr> </tbody> </table> <input type="button" id= "btn1" value="最初の要素の背景色を変更"> <script src="index.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h2>最初の要素を取得する</h2>

  <table border="1" style="border-collapse: collapse">
    <tbody>
      <tr>
        <th>月</th>
        <th>month</th>
      </tr>
      <tr>
        <td>1月</th>
          <td>January</td>
        </tr>
        <tr>
          <td>2月</td>
          <td>February</td>
        </tr>
        <tr>
          <td>3月</td>
          <td>March</td>
        </tr>
        <tr>
          <td>4月</td>
          <td>April</td>
        </tr>
        <tr>
          <td>5月</td>
          <td>May</td>
        </tr>
        <tr>
          <td>6月</td>
          <td>June</td>
        </tr>
        <tr>
          <td>7月</td>
          <td>July</td>
        </tr>
        <tr>
          <td>8月</td>
          <td>August</td>
        </tr>
        <tr>
          <td>9月</td>
          <td>September</td>
        </tr>
        <tr>
          <td>10月</td>
          <td>October</td>
        </tr>
        <tr>
          <td>11月</td>
          <td>November</td>
        </tr>
        <tr>
          <td>12月</td>
          <td>December</td>
        </tr>
    </tbody>
  </table>
  <input type="button" id= "btn1" value="最初の要素の背景色を変更">
  <script src="index.js"></script>
</body>
</html>

index.js

$(function(){ // ボタンのイベントを設定する $("#btn1").click(function() { // trタグの最初の要素を取得する $("tr").first().css({ background: "skyblue", opacity: 0.5 }); }); });

1
2
3
4
5
6
7
8
9
10

$(function(){
  // ボタンのイベントを設定する
  $("#btn1").click(function() {
    // trタグの最初の要素を取得する
    $("tr").first().css({
      background: "skyblue",
      opacity: 0.5
    });
  });
});

出力結果

first()で最初の要素を取得することができます。
そのため、ボタンを押すと、trタグ要素の最初の要素であるthタグ要素の背景色が変化しています。

:firstで最初に一致した要素だけを取得する方法

:firstで最初に一致した要素だけを取得する方法についても紹介してみます。

sample.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>:firstで最初の要素を取得する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th>月</th> <th>month</th> </tr> <tr> <td>1月</th> <td>January</td> </tr> <tr> <td>2月</td> <td>February</td> </tr> <tr> <td>3月</td> <td>March</td> </tr> <tr> <td>4月</td> <td>April</td> </tr> <tr> <td>5月</td> <td>May</td> </tr> <tr> <td>6月</td> <td>June</td> </tr> <tr> <td>7月</td> <td>July</td> </tr> <tr> <td>8月</td> <td>August</td> </tr> <tr> <td>9月</td> <td>September</td> </tr> <tr> <td>10月</td> <td>October</td> </tr> <tr> <td>11月</td> <td>November</td> </tr> <tr> <td>12月</td> <td>December</td> </tr> </tbody> </table> <input type="button" id= "btn1" value="最初の要素の背景色を変更(:first)"> <input type="button" id= "btn2" value="最初の要素の背景色を変更(first())"> <script src="index.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h2>:firstで最初の要素を取得する</h2>

  <table border="1" style="border-collapse: collapse">
    <tbody>
      <tr>
        <th>月</th>
        <th>month</th>
      </tr>
      <tr>
        <td>1月</th>
          <td>January</td>
        </tr>
        <tr>
          <td>2月</td>
          <td>February</td>
        </tr>
        <tr>
          <td>3月</td>
          <td>March</td>
        </tr>
        <tr>
          <td>4月</td>
          <td>April</td>
        </tr>
        <tr>
          <td>5月</td>
          <td>May</td>
        </tr>
        <tr>
          <td>6月</td>
          <td>June</td>
        </tr>
        <tr>
          <td>7月</td>
          <td>July</td>
        </tr>
        <tr>
          <td>8月</td>
          <td>August</td>
        </tr>
        <tr>
          <td>9月</td>
          <td>September</td>
        </tr>
        <tr>
          <td>10月</td>
          <td>October</td>
        </tr>
        <tr>
          <td>11月</td>
          <td>November</td>
        </tr>
        <tr>
          <td>12月</td>
          <td>December</td>
        </tr>
    </tbody>
  </table>
  <input type="button" id= "btn1" value="最初の要素の背景色を変更(:first)">
  <input type="button" id= "btn2" value="最初の要素の背景色を変更(first())">
  <script src="index.js"></script>
</body>
</html>

index.js

$(function(){ // ボタンのイベントを設定する $("#btn1").click(function() { // trタグの最初の要素を取得する $("tr:first").css({ background: "tomato", opacity: 0.5 }); }); // ボタンのイベントを設定する $("#btn2").click(function() { // trタグの最初の要素を取得する $("tr").first().css({ background: "skyblue", opacity: 0.5 }); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function(){
  // ボタンのイベントを設定する
  $("#btn1").click(function() {
    // trタグの最初の要素を取得する
    $("tr:first").css({
      background: "tomato",
      opacity: 0.5
    });
  });
  // ボタンのイベントを設定する
  $("#btn2").click(function() {
    // trタグの最初の要素を取得する
    $("tr").first().css({
      background: "skyblue",
      opacity: 0.5
    });
  });
});

出力結果

セレクタに:firstの擬似クラスを指定することでセレクタの最初の要素を取得しています。
また、first()を使用することでセレクタの最初の要素を取得しています。

さとみさん

擬似クラスの:firstでも最初の要素を取得することができるのですね！

ハルトさん

そうですね。
擬似クラスの:firstもfirst()と同じように最初の要素を取得することができるので、どちらを使っても良いと思います。
しかし、first()はjQueryで用意されているメソッドになりますのでjQueryではfirst()を使用するようにしましょう。

今回のポイント

first()で最初の要素を取得

⚫︎ 最初の要素を取得するにはjQueryのfirst()を使用する

⚫︎ 擬似クラスの:firstを使っても最初の要素を取得することができる

関連記事

jQueryのlast()で最後の要素を取得する方法についてはこちらをご参考ください。

2020.10.23
【jQuery】last()を使って最後の要素を取得する！
最後の要素を取得するにはjQueryのlast()を使用します。 jQueryのlast()とは指定した要素の最後の要素を取得するメソッドとなります。また、最後の要素は擬似クラスの:lastでも取得ですることはできますが、jQueryで最後の要素を取得...

Writer

ST

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。