jQuery｢.get()｣で jQueryオブジェクトからDOM要素を取得する方法

2020年8月10日

jQueryの「.get()」は、指定のjQueryオブジェクトをDOM要素として取得する事ができるメソッド

今回は、jQueryの「.get()」について、その使い方をサンプルを交えて解説しよう。

.get()の機能とは？

.get()の機能

.get()は、「指定のjQueryオブジェクトの中で、引数に指定したインデックス番号（0から始まる）のDOM要素を取得する」事ができる。

インデックス番号の指定を省略した場合は、すべての要素を配列に入れて返す。

.get()で指定する「インデックス番号」とは、セレクタで指定した要素において、HTML全体の中における（0から始まる）順番で指定する事ができる。

また数字に「負の数」を入れる事で、後ろから数えた順番も指定できる。

.get()の構文

.get()の構文は次のような記述となる

$("セレクタ").get(インデックス番号);

この「インデックス番号」の指定は0から始まる整数であり、前述したように「負の整数」も指定できる。

.get()の使用例

たとえば次のようなHTMLがあったとする

HTML

<button>ボタン</button>
<p>
<span>ねこ</span>
<span>いぬ</span>
<span>さる</span>
</p>
<div class="display"></div>

jQuery

$(function(){
  $("button").on("click",function(){
    var hoge = $("span").get(1);
    $(".display").html(hoge);
  });
});

この例ではbuttonをクリックする事で、spanに対して.get(1)という形でインデックス番号を指定する事で、HTML内に存在するspanの中の２つ目に登場する要素（インデックス番号1）を取得し、変数hogeに格納。

さらに.displayのhtmlを「.htmlメソッド」でさきほど格納したhogeに書き換えるというもので、この場合spanの中で２番目に登場する「いぬ」に書き換わる事になる。

実際の動きをcodePenで見てみよう。

See the Pen .get() by stand4u (@stand4u) on CodePen.

メモ

ここで注意すべき点は、CodePenで実際にクリックしてみて頂くとわかるのだが.displayのhtmlを「いぬ」書き換えただけなのに、元にあったp内のspanの「いぬ」は消えてしまうという点。

これはjQueryの仕様で「jQueryオブジェクトは同じ要素が重複しないように制御される」という理由らしい。

インデックス番号を省略した場合

上記と同じHTMLでインデックス番号を省略した場合を見ていこう。

HTML

<button>ボタン</button>
<p>
<span>ねこ</span>
<span>いぬ</span>
<span>さる</span>
</p>
<div class="display"></div>

jQuery

$(function(){
  $("button").on("click",function(){
    var hoge = $("span").get();
    $(".display").html(hoge);
  });
});

このようにインデックス番号を入れずに省略した場合はbuttonをクリックする事で、HTML内に存在するすべてのspanを取得し、変数hogeに（配列で）格納した上で、.displayのhtmlを書き換えて「ねこいぬさる」となる。

この場合も、元のp内のspanは仕様で消えてしまう。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント