「jQuery」.getで要素のオブジェクトを取得するサンプル

2022年2月28日

環境
jQuery3.6.0
Google Chrome 98.0.4758.102

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  //検証クリック
  $("#btnConfirm").click(function(){
    //class="city"の2番目の要素を取得
    let res = $('.city').get(2); 
    alert("要素のオブジェクト: "+res.innerText);
  });
 
});
</script>
</head>
<body>
  <div class="city">東京</div>
  <div class="city">大阪</div>
  <div class="city">福岡</div>
  <p><input type="button" id="btnConfirm" value="検証"></p>
</body>
</html>

実行結果
「検証」ボタンを押すと、画面に「要素のオブジェクト: 福岡」が表示します。

jQuery

Posted by arkgame