「jQuery」.each()でli要素に対して繰り返し処理を行う

2022年2月15日

環境
jQuery 3.6.0
書式
$('ul.クラス名 li’).each(function(idx, elm){処理コード});
.each()を使用して、配列要素に対して繰り返し処理を行います。
使用例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> li要素の内容に対して繰り返し処理を行うサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
 
  $('#btnShow').click(function(){
    //li要素を全件読込みalertに出力する
    $('ul.cityLst li').each(function(idx, elm){
      var val = $(elm).text();
      alert(idx+ val);
    });
  });
 
});
</script>
</head>
<body>
  <ul class="cityLst">
    <li>tokyo</li>
    <li>oosaka</li>
    <li>fukuoka</li>
  </ul>
 
  <input type="button" id="btnShow" value="検証">
</body>
</html>

実行結果
「検証」ボタンを押すと、li要素の内容をalertに出力します。
0tokyo
1oosaka
2fukuoka

jQuery

Posted by arkgame

関連記事: