1

我正在尝试使用javascript / jQuery在单击的页面或“活动”可以是动态的页面时显示不同的图像。我想为每个 li 设置一个唯一的 ID 并使用 javascript。

我对 javascript 很陌生，真的不知道从哪里开始。任何帮助都会很棒。谢谢。

<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class="active nav-edit " id="nav-main-menu">
     <li class=" nav-link  active ">
         <a href="/about" data-toggle="" class=" nav-link  active ">ABOUT </a>
     </li>
     <li>
         <a href="/teachers" data-toggle="" class=" nav-link ">FOR TEACHERS </a>
     </li>
      <li><a href="/students" data-toggle="" class=" nav-link ">FOR STUDENTS </a>
     </li>
     <li><a href="/parents" data-toggle="" class=" nav-link ">FOR PARENTS </a>
     </li>
     <li><a href="/contact" data-toggle="" class=" nav-link ">CONTACT US </a></li>
     <li><a href="/register" data-toggle="" class=" nav-link ">REGISTER </a></li>
</ul>
4

2 回答 2

2

jQuery：您可以.each在回调函数中使用和递增索引：

$("#nav-main-menu li").each(function(index) {
    $(this).attr("id", "id" + index);
});

现在每个li人都有一个 ID，从列表开始id0到列表有多长。

于 2013-07-09T14:54:01.097 回答
0

如果您不想要数字 ID，可以试试这个：

$('li').each(function(){
    $(this).attr('id',$(this).text().trim().toLowerCase().replace(' ','_'));
})

假设每个li元素都有一个带有不同文本描述的链接，这将为每个li元素分配一个等于小写文本值的 id，并用下划线替换空格。

JSBin Demo

于 2013-07-09T14:58:53.977 回答