【jQuery】HTML要素のループ処理を理解しよう！

HTMLの要素に対してループ処理を行う場合は、jQueryのeachメソッドを使うことで、選択された要素の集まりに対して反復処理を実行できます。以下に具体例をいくつか紹介します。

事例1: すべての<li>要素のテキストを取得

リスト項目（<li>）要素のテキストをループして取得し、コンソールに出力する例です。

<ul id="myList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

$('#myList li').each(function(index, element) {
    console.log('Item ' + (index + 1) + ': ' + $(this).text());
});

実行結果

Item 1: Apple
Item 2: Banana
Item 3: Cherry

事例2: <div>要素にクラスを追加

すべての<div>要素に対してクラスを追加する例です。

<div>First div</div>
<div>Second div</div>
<div>Third div</div>

$('div').each(function() {
    $(this).addClass('highlight');
});

説明

上記のスクリプトにより、各<div>要素にクラスhighlightが追加されます。これにより、すべての<div>が同じスタイルを持つようになります。

事例3: ボタンをクリックしたときに、各<p>要素のテキストを変更

ページ内のすべての<p>要素のテキストを特定のボタンをクリックしたときに変更する例です。

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button id="changeText">Change Paragraphs</button>

$('#changeText').click(function() {
    $('p').each(function(index) {
        $(this).text('Updated Paragraph ' + (index + 1));
    });
});

説明

このスクリプトは、ボタンをクリックすると、ページ内の各<p>要素のテキストを「Updated Paragraph 1」などの形で変更します。

ポイント

• $(this)は、eachメソッド内で現在の要素を指します。$(this).text()や$(this).addClass()などを使用して、個々の要素に対して操作を行えます。
• eachメソッド内のindexは、要素のインデックスを示します（0から始まります）。

これらの例は、jQueryを使用してHTML要素のループ処理を実行する際の便利な使い方を示しています。