How to get a different ID to each li element by JavaScript or jQuery

Question

I have the unordered list like: Engineer 1 Engineer 5 Engineer 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> tags are getting dynamically.Some times it getting 3 or 10 or more tags.

Answer 1

Use jQueryElem.attr( attributeName, function ) when setting multiple attributes or using values returned by a 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>

Answer 2

This can be done fairly easily with 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.

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>

Answer 3

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

$('#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>

Answer 4

This jquery script adds "data-li-itemNumber" id to every element in 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>

Answer 5

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

Answer 6

As of jQuery 1.4, you can do this:

$('#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.

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