Question

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

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

前

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

后

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

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

尝试了所有的回复，除了ul / li项目之外什么都没有在普通的html页面上工作。

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

Answer 1

如果您不想要的页面上还有其他li标记，我将为您的ul代码提供包含id li的{{1}}代码订购，但在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>

您只需使用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- <li>。

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

Answer 3

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

Answer 4

我要将你的代码包装在一个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>

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);
}

并在您的HTML中：

<body onload="loadcode()">

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

4 个答案: