特定のclassのついたタグにidを順番に割り当てる

Question

class.hogeがあるタグに対して、idを順番に割り当てたいと思っています。
（hoge_00、hoge_01、hoge_02…hoge_07）

<ul>
    <li class="hoge"></li>
    <li class="hoge"></li>
    <li class="hoge"></li>
    <li class="hoge"></li>
    <li class="hoge"></li>
    <li class="hoge"></li>
    <li class="hoge"></li>
 </ul>

$(function() {
    var i = 0;
    $('.hoge').each(function(i) {
        $(this).attr('id', "hoge_0"+ i);
    });
});

書き方を調べてみたところ、上記のような書き方をしているのを見たのですが、
もっと綺麗に書く方法はありますでしょうか？

Answer 1

.attrにコールバック関数を渡して、その返り値を属性にすることができます。

$('.hoge').attr('id',function(i){return "hoge_"+i});

Comments

[退会済みユーザー]

ありがとうございます。
こういった書き方も出来るんですね！
追加の質問となり恐縮ですが、var i　の宣言は不要なのでしょうか？
（グローバル変数にならないのでしょうか？）

[ikki57]

先ほど回答してしまったのですが、こちらのやり方の方が良いですね

[ikki57]

> var i　の宣言は不要なのでしょうか？

不要です。
下記ドキュメントに記載がありますが、
http://semooh.jp/jquery/api/attributes/attr/key,fn/

> attr(key,fn)
> 設定したい値を返すコールバック関数。スコープ内でのthisポインタは処理中の要素。引数は処理中の要素のインデックス。

`attr` の第二引数の `function` の引数は（つまりサンプルコードの `i` は）、
`処理中の要素のインデックス` （つまり順序の番号ですね。0, 1, 2, 3... ）
が入ってくるので、宣言は不要です。

[退会済みユーザー]

丁寧なご説明をありがとうございました！
よくわかりました。

Answer 2

	$('.hoge').each(function(i, e) {
		$(this).attr('id', "slideForm_0" + ++i);
	});

Comments

[退会済みユーザー]

ありがとうございます！こちらも私のものより綺麗ですね。勉強になりました。