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

Adding auto increment value to li element

本文关键字：添加 li 元素      更新时间：2023-09-26

我是一个 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 页面上起作用。

多亏了所有的努力，我失败了......我不是编码员

我将给你的li标签一个包含id的包罗万象的ul，以防页面上有其他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>

您只需使用 each 方法：

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

不过，我建议使用不仅仅是纯整数以外的其他东西作为id，所以也许像'ordered' + (i+1)这样的东西，而不仅仅是上面的i+1。

你的标签上写着jQuery，所以：

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

所以你可以学习：你用$('foo')语法制作一个HTML节点的集合。你使用CSS选择器，所以li将在页面上获得 - 每 - <li>。

.each循环访问这些收集的HTML元素，并对它们执行某些操作。"某物"在代码function(i){this.id = i}中。jQuery将你所在的哪个循环传递给函数i，大括号内的代码将该特定元素的id设置为i。

如果你需要id来设置样式，那是一个坏主意。你应该做的是使用 css 3 伪类 ：nth-child（n），它在你的 css 领域。

我将把你的代码包装在一个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()">
相关文章：