如何通过JavaScript或jQuery为每个li元素获取不同的ID [复制]

This question already has an answer here:

这个问题在这里已有答案：

Add a different ID to each li element by jQuery 1 answer
通过jQuery 1 answer为每个li元素添加不同的ID

I have the unordered list like: Engineer 1 Engineer 5 Engineer 11

我有无序的列表，如：工程师1工程师5工程师11

And I'd like to add a different ID to every li displayed in this . Is there a way how to achieve this via jQuery or Java Script?

我想为此中显示的每个li添加不同的ID。有没有办法如何通过jQuery或Java Script实现这一目标？

<li> tags are getting dynamically.Some times it getting 3 or 10 or more tags.

标签正在动态获取。有时它会获得3或10个或更多标签。

标签正在动态获取有时。它会获得3或10个或更多标签。

6 个解决方案

#1

Use jQueryElem.attr( attributeName, function ) when setting multiple attributes or using values returned by a function.

设置多个属性或使用函数返回的值时，请使用jQueryElem.attr（attributeName，function）。

$('#data li').attr('id', function() {
  return 'id_' + $(this).index();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="data">
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 1</span>
    </a>
    </span>
  </li>
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 5</span>
    </a>
    </span>
  </li>
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 11</span>
    </a>
    </span>
  </li>
</ul>

#2

This can be done fairly easily with vanilla JS...

这可以通过vanilla JS轻松完成......

You could loop through each instance of the class modal-ui-starting and append a unique ID, by using a counter which increments each time and adds this to an id.

您可以循环遍历类modal-ui-starting的每个实例，并使用每次递增的计数器附加一个唯一的ID，并将其添加到id。

var lis = document.getElementsByClassName("modal-ui-starting");
var idinc = 0;
for (var i = 0; i < lis.length; i++) {
  idinc++;
  lis[i].id = "lisItem" + idinc;
}

<ul id="data">
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 1</span></a></span></li>
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 5</span></a></span></li>
  <li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 11</span></a></span></li>
</ul>

#3

This jquery script adds "data-li-itemNumber" id to every element in ul

这个jquery脚本将“data-li-itemNumber”id添加到ul中的每个元素

$("#data").find("li").each(function(index){
	$(this).attr("id","data-li-"+index);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="data">
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 1</span></a></span></li>
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 5</span></a></span></li>
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 11</span></a></span></li>
</ul>

#4

You can use callback function of .attr() which has index and old value as argument :

您可以使用.attr（）的回调函数，它具有索引和旧值作为参数：

$('#data li').attr("id",function(i,o){
  return "data_li_" + i.toString();
});

Working Snippet:

工作片段：

$('#data li').attr("id",function(i,o){
  return "data_li_" + i.toString();
});
console.log($('#data li'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="data">
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 1</span></a></span></li>
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 5</span></a></span></li>
<li class="modal-ui-starting"><span style="margin-left: 10px;color: white;" class="glyphicon glyphicon-check"><a style="font-family: Arial,Verdana,sans-serif;text-decoration:none;" onclick="something.jsp" href="#"><span style="color:green;">Engineer 11</span></a></span></li>
</ul>

#5

<script>
$(document).ready(function()
{
  $('#data li').each(function( index ) {
    $(this).attr('id','diff_'+index);
  });
});
</script>

#6

As of jQuery 1.4, you can do this:

从jQuery 1.4开始，你可以这样做：
$('#pages li').attr('id', function(i) {
   return 'page'+(i+1);
});
earlier versions, you'd need to write:

早期版本，你需要写：
$('#pages li').each(function(i) {
    $(this).attr('id', 'page'+(i+1));
});
... which works in 1.4 as well. It's a matter of preference, I guess.

......也适用于1.4。我想这是一个偏好的问题。

Taken from: Add a different ID to each li element by jQuery

取自：jQuery为每个li元素添加不同的ID

#1