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);
    });