Question

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

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

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

Answer 1

在设置多个attributes或使用function返回的值时使用jQueryElem.attr( attributeName, function )。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

工作代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用vanilla JS可以很容易地做到这一点......

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

这个jquery脚本添加＆＃34; data-li-itemNumber＆＃34; id为ul

中的每个元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

Answer 6

从jQuery 1.4开始，你可以这样做：
$('#pages li').attr('id', function(i) {
   return 'page'+(i+1);
});
早期版本，您需要写：
$('#pages li').each(function(i) {
    $(this).attr('id', 'page'+(i+1));
});
......也适用于1.4。我想这是一个偏好问题。

取自： Add a different ID to each li element by jQuery

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

6 个答案: