「jQuery」eachを使用して指定classの全要素を取得する

2022年2月25日

環境
jquery 3.6.0
Google Chrome　98.0.4758.102

書式
$(“.クラス名").each(function(引数1, 引数2){処理コード}
引数1:インデックス番号
引数2:要素オブジェクト
.eachを使用して指定classの全要素ループ処理します。
使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('#btnShow').click(function(){
    //class="city"の要素一覧を取得してループ処理する
    $(".city").each(function(i, ele){
      //インデックス番号とテキストを出力
      alert('インデックス番号:' + i + '、名前:' + $(ele).text());
    });
  });
});
</script>
</head>
<body>
  <div class="city">東京</div>
  <div class="city">大阪</div>
  <div class="city">福岡</div>
  <p class="city">横浜</p>
  <p class="city">埼玉</p>
  <input type="button" id="btnShow" value="検証">
</body>
</html>

結果

「検証」ボタンを押すと、以下の内容をalertで出力します。
インデックス番号:0、名前:東京
インデックス番号:1、名前:大阪
インデックス番号:2、名前:福岡
インデックス番号:3、名前:横浜
インデックス番号:4、名前:埼玉

 

jQuery

Posted by arkgame