Javascript 向菜单项列表添加唯一ID

我正在尝试使用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>

jQuery：您可以使用

。回调函数中的每个

和递增索引：

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

---

每个

li

现在都有一个从

id0开始的ID，不管列表有多长。
如果不需要数字ID，可以尝试以下方法：

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

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

这看起来很危险，因为如果在多个位置应用，它可能会生成非唯一的ID。更改ID的初始标识符，那么，按照目前的情况，此代码只能用于此列表，因为它以ID为目标。我认为，如果已经出现错误，即将“导航主菜单”ID赋予多个元素，则这将是危险的。否则，它会工作得很好。一旦我输入：
$（document）.ready（function（）{$（“#nav main menu li”）.each（function（index）{$（This.attr（“id”，“id”+index）；}）；}）