javascript 向 li 元素添加自动增量值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6006001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding auto increment value to li element
提问by ckeeley
im a css/designer guy so please excuse my lameness in not knowing any .js
我是一个 css/设计师，所以请原谅我不知道任何 .js 的跛脚
basically i want to know how to add an auto incremental id to a list item with javascript / jquery for something that i am trying to add some css to.
基本上，我想知道如何使用 javascript/jquery 将自动增量 id 添加到列表项，以便我尝试向其中添加一些 css。
before
前
<li id=""><a href="">Item number 1</a></li>
<li id=""><a href="">Item number 2</a></li>
<li id=""><a href="">Item number 3</a></li>
after
后
<li id="1"><a href="">Item number 1</a></li>
<li id="2"><a href="">Item number 2</a></li>
<li id="3"><a href="">Item number 3</a></li>
thanks in advance and especially just for reading this
提前致谢，尤其是阅读本文
tried all the responses, nothing has worked on a plain html page with nothing but the ul/li items.
尝试了所有的响应，在一个只有 ul/li 项目的纯 html 页面上没有任何效果。
thanks to all that tried, i have failed in a big way.....im not a coder
感谢所有尝试，我失败了.....我不是编码员
回答by mVChr
I'm going to give your litags an encompassing ulwith an idin case there are other litags on the page that you don't want to order, but in jQuery this is pretty easy for:
我要去给你的li标签一个无所不包ul用id的情况下有其他li网页上的标签，你不想秩序，但在jQuery中，这是很容易的：
<ul id="ordered">
<li><a href="">Item number 1</a></li>
<li><a href="">Item number 2</a></li>
<li><a href="">Item number 3</a></li>
</ul>
You would simply use the eachmethod:
您只需使用以下each方法：
$('#ordered li').each(function(i,el){
el.id = i+1;
});
I would recommend using something other than just a plain integer for an id though, so maybe something like 'ordered' + (i+1)instead of just i+1above.
不过，我建议对 id 使用除普通整数以外的其他内容，因此可能类似于'ordered' + (i+1)而不是i+1上面的内容。
回答by Alex Mcp
Your tags say jQuery, so:
你的标签说 jQuery，所以：
$("li").each(function(i){this.id = i})
So you can learn: you make a collection of HTML nodes with the $('foo')syntax. You use CSS selectors, so liwill get -every- <li>on the page.
所以你可以学习：你用$('foo')语法制作了一个 HTML 节点的集合。您使用 CSS 选择器，因此li将<li>在页面上显示-every- 。
.eachloops over those collected HTML elements, and does something to them. The 'something' is in the code function(i){this.id = i}. jQuery passes which loop you're on to the function as i, and the code inside the curly braces sets the id of that particular element to i.
.each循环那些收集到的 HTML 元素，并对它们做一些事情。“东西”在代码中function(i){this.id = i}。jQuery 将您所在的循环作为 传递给函数i，花括号内的代码将该特定元素的 id 设置为i。
回答by N.B.
If you need id's for styling, that's a bad idea. What you should do is use css 3 pseudo class :nth-child(n) which is in your area of css.
如果您需要 id 的样式，那是个坏主意。您应该做的是使用 css 3 伪类 :nth-child(n) ，它位于您的 css 区域。
回答by Pwnna
I'm going to wrap your code in a div so it's easier to code for
我将把你的代码包装在一个 div 中，这样更容易编码
<div id="increment">
<li><a href="">Item number 1</a></li>
<li><a href="">Item number 2</a></li>
<li><a href="">Item number 3</a></li>
</div>
And js would be:
而 js 将是：
function loadcode(){
var increments = document.getElementById("increment");
var li = increments.getElementsByTagName("li");
for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1);
}
and in your HTML:
并在您的 HTML 中：
<body onload="loadcode()">
