将自动增量值添加到li元素

我是一名css /设计师，所以请原谅我不知道任何.js的跛脚

基本上我想知道如何使用javascript / jquery为列表项添加自动增量ID，以便我尝试添加一些css。

之前

Item number 1
 
Item number 2
 
Item number 3 

后

 
Item number 1
 
Item number 2
 
Item number 3 

提前感谢，尤其是阅读本文

尝试了所有的回复，没有任何东西在一个简单的html页面上工作，只有ul / li项目。

感谢所有尝试过的，我在很大程度上失败了……我不是编码员

Answer 1

我要给你的li标签带一个带有id的包含ul ，以防你在页面上有其他li标签你不想订购，但在jQuery中这很容易：

 
 
Item number 1
 
Item number 2
 
Item number 3
  

您只需使用each方法：

 $('#ordered li').each(function(i,el){ el.id = i+1; }); 

我建议使用除了普通整数以外的其他东西，所以也许像'ordered' + (i+1)而不仅仅是上面的i+1 。

Answer 2

你的标签说jQuery，所以：

 $("li").each(function(i){this.id = i}) 

因此，您可以学习：使用$('foo')语法创建HTML节点的集合。 您使用CSS选择器，因此li将在页面上获得-every-

。

.each循环遍历那些收集的HTML元素，并对它们做了一些事情。 ‘something’在代码function(i){this.id = i} 。 jQuery将你正在循环的循环传递给函数i ，并且花括号内的代码将该特定元素的id设置为i 。

Answer 3

如果你需要用于造型的id，那是个坏主意。 你应该做的是使用css 3伪类：nth-​​child（n），它位于你的css区域。

Answer 4

我将把你的代码包装在div中，这样代码就更容易了

 
 
Item number 1
 
Item number 2
 
Item number 3
  

并且js将是：

 function loadcode(){ var increments = document.getElementById("increment"); var li = increments.getElementsByTagName("li"); for (i=0;i 

并在您的HTML中：