如何通过JavaScript或jQuery为每个li元素获取不同的ID
如何通过JavaScript或jQuery为每个li元素获取不同的ID
提问于 2016-06-21 09:53:47
我有一个无序的清单，如:工程师1工程师5工程师11
我想给这里显示的每一个li添加一个不同的ID。有没有办法通过jQuery或Java脚本实现这一点？
<li>标签得到的是dynamically.Some乘以它得到3或10个或更多的标签。
回答 6
Stack Overflow用户
回答已采纳
发布于 2016-06-21 09:55:45
设置多个jQueryElem.attr( attributeName, function )或使用
function返回的值时使用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>
Stack Overflow用户
发布于 2016-06-21 09:56:23
您可以使用具有索引和旧值的.attr()的回调函数作为参数：
$('#data li').attr("id",function(i,o){
return "data_li_" + i.toString();
});工作片段：
$('#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>
Stack Overflow用户
发布于 2016-06-21 09:57:35
这很容易用香草JS.
您可以循环遍历类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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37941135
复制相关文章
相似问题
腾讯云开发者
