[jQuery] 要素のオブジェクトを取得する（.get）

投稿日：2017年9月17日更新日：2018年4月28日

jQueryで要素のオブジェクトを取得するには、.get()を使用します。
※JavaScriptの getElementById や getElementsByClassName と同じ要素を取得します。

サンプルソース

例）ボタンを押すと要素オブジェクトを取得してinnerTextを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  //ボタン１クリック
  $("#btn1").click(function(){
    let obj = $('.aa').get(2);  //class="aa"の２番目の要素を取得
    console.log(obj.innerText);
  });

  //ボタン２クリック
  $("#btn2").click(function(){
    let obj = $('#bb').get(0);  //id="bb"の要素を取得
    console.log(obj.innerText);
  });
});
</script>
</head>
<body>
  <div class="aa">hoge1</div>
  <div class="aa">hoge2</div>
  <div class="aa">hoge3</div>
  <div id="bb">hoge4</di>
  <input type="button" id="btn1" value="ボタン１">
  <input type="button" id="btn2" value="ボタン２">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

//ボタン１クリック

$("#btn1").click(function(){

let obj = $('.aa').get(2); //class="aa"の２番目の要素を取得

console.log(obj.innerText);

});

//ボタン２クリック

$("#btn2").click(function(){

let obj = $('#bb').get(0); //id="bb"の要素を取得

console.log(obj.innerText);

});

</script>

</head>

<body>

</body>

</html>

解説

jQueryで要素オブジェクトを取得するには、getを使用します。
$('xx')で取得されるオブジェクトは配列となっているので、getでインデックスを指定して取得します。
id要素で対象が１つしか無い場合でもインデックス＝0を指定する必要があります。　例）.get(0)

執筆者：とら