Question

我正在尝试使用javascript / jQuery在点击的页面或“active”可以是动态的时候显示不同的图像。我想为每个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>

Answer 1

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

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

每个li现在都有一个从id0开始的ID到列表的长度。

Answer 2

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

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

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

JSBin Demo

将唯一ID添加到菜单项列表

2 个答案: