jQueryで階層構造のリストに連番でIDを追加する方法

HTMLのリストにjQueryを使って動的にIDを追加する場合、階層構造を意識しながらIDを付ける方法について解説します。この記事では、リストアイテムに連番のIDを自動的に付与する方法を具体的なコード例とともに紹介します。

階層構造のリストにIDを追加する理由
jQueryを使って連番でIDを付与する基本構文
階層構造を考慮してIDを追加する
実際のHTMLに対してjQueryを適用する
まとめ

階層構造のリストにIDを追加する理由

HTMLでのリストは階層構造を持つことが多く、リスト項目ごとにIDを付与することで、後からCSSやJavaScriptで個別に操作できるようになります。特に動的に生成されるリストには、各項目を一意に識別できるIDが必要です。

例えば、リスト内のアイテムに対して順番にIDを付けることで、スタイルやイベント処理を個別に適用することが可能になります。

jQueryを使って連番でIDを付与する基本構文

まずは、基本的な構文を紹介します。以下のコードは、リスト項目に対して連番のIDを自動的に付けるためのjQueryのサンプルです。

$(document).ready(function() {
    $('li').each(function(index) {
        $(this).attr('id', 'item' + (index + 1));
    });
});

このコードでは、jQueryのeach関数を使用して、リスト内の各

要素に対して、IDを付与しています。index + 1で、1から始まる連番を生成しています。

階層構造を考慮してIDを追加する

リストが階層構造を持っている場合、親要素と子要素ごとにIDを付ける方法もあります。この場合、親要素にIDを付け、子要素には親要素のIDに連番を追加する形にすると良いでしょう。

以下のコードは、階層構造を持つリストに対して、親要素と子要素にIDを付ける方法です。

$(document).ready(function() {
    $('ul').each(function(ulIndex) {
        $(this).children('li').each(function(liIndex) {
            var parentID = 'item' + (ulIndex + 1);
            var childID = parentID + '-' + (liIndex + 1);
            $(this).attr('id', childID);
        });
    });
});

このコードでは、最初に

に連番IDを付けています。親要素のIDに子要素番号を付け加えて、一意なIDを付与しています。

実際のHTMLに対してjQueryを適用する

質問者のHTML例を基にした場合、以下のような階層を持つリストがあるとします。

<div class='list'>
    <ul>
        <li>項目１</li>
        <li>項目２
            <ul>
                <li>項目２−１</li>
                <li>項目２−２
                    <ul>
                        <li>項目２−２−１</li>
                        <li>項目２−２−２</li>
                        <li>項目２−２−３</li>
                    </ul>
                </li>
                <li>項目２−３</li>
            </ul>
        </li>
        <li>項目３</li>
    </ul>
</div>

これに対して、先程紹介したjQueryコードを適用すると、以下のようにIDが追加されます。

<div class='list'>
    <ul>
        <li id='item1'>項目１</li>
        <li id='item2'>項目２
            <ul>
                <li id='item2-1'>項目２−１</li>
                <li id='item2-2'>項目２−２
                    <ul>
                        <li id='item2-2-1'>項目２−２−１</li>
                        <li id='item2-2-2'>項目２−２−２</li>
                        <li id='item2-2-3'>項目２−２−３</li>
                    </ul>
                </li>
                <li id='item2-3'>項目２−３</li>
            </ul>
        </li>
        <li id='item3'>項目３</li>
    </ul>
</div>