「jQuery」.each()でli要素に対して繰り返し処理を行う
環境
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