javascript - リンクの動的 ID を設定するには?

Question

水平メニューがあります。jQueryを使用してそれぞれのIDを作成したい。私のコードは次のとおりです。

<div class="menuBar">
    <div class="menuHeader ui-corner-top">
        <span><a href="#" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" onclick="NewTransaction()" id="menu2">New Transaction</a></span>
    </div>
</div>

ここでは、メニューに ID がありません。jQueryを使ってidを動的に作成したい。これどうやってするの？私はこのような例を行いましたが、うまくいきません:

var i = 0;
$('.menuHeader').each(function () {
    i++;
    newID = menu + i;
    $(this).attr('id', newID);
    $(this).val(i);
});

Answer 1

この.each()メソッドは、DOM ループ構造を簡潔にし、エラーを起こしにくくするように設計されています。呼び出されると、jQuery オブジェクトの一部である DOM 要素を反復処理します。コールバックが実行されるたびに、0 から始まる現在のループ反復が渡されます。

メニュー文字列をi変数と連結するときにも引用符を省略しました。

$('.menuHeader').each(function (i) {
  $(this).find('a').attr('id', 'menu' + (i + 1));
  $(this).html((i + 1) + '. ' + $(this).html());
});

jsFiddle デモ

Answer 2

これを試してみてください。余分な変数は必要ありませんi:

$('.menuHeader').each(function () {
    $(this).attr('id', 'menu' + ($(this).index() + 1));
    $(this).val($(this).index() + 1);
});

Answer 3

これを試して

   $('.menuHeader').each(function (i) {
      newID = "menu_" + i;
      $(this).attr('id', newID);
      $(this).val(i);
    });