JQuery - 每 li 编号答案

【问题标题】：JQuery - Number every liJQuery - 每 li 编号
【发布时间】：2011-01-04 07:58:40
【问题描述】：

我对数组和编号对象了解不多。我希望你能明白我所说的“每里数”是什么意思。所以第一个 li 得到类“0”，第二个 li 得到类“1”，依此类推。

HTML

<div id="imtheking">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>

伪 Javascript (Jquery)

$('#imtheking ul > li').number(starting from: '0');

结果 HTML

<div id="imtheking">
<ul>
<li class="0">List Item</li>
<li class="1">List Item</li>
<li class="2">List Item</li>
<li class="3">List Item</li>
<li class="4">List Item</li>
<li class="5">List Item</li>
<li class="6">List Item</li>
</ul>
</div

是的，我认为只包含数字的类名是不正确的。因此，与其使用“0”或“1”，不如将其命名为“number0”或“number1”。

感谢您的回复！

【问题讨论】：

请注意，您将在列表中添加额外的类层，该列表中的信息不超过列表中已有的信息，即序列。
@Caspar Kleijne - 我们谈论“索引”值吗？我没有意识到这一点。
我的意思是，如果您要添加的类仅是单个元素固有的并且它是表示的，在大多数情况下，不需要添加类。如果所有项目都应该以不同的方式呈现，我怀疑列表是否有用。因此，请以一种或另一种方式解释您要实现的目标。
另外，数字在 HTML 中不是有效的类名。您可能想查看 JQuery index 函数。
您还应该考虑使用 OL 标签。 UL = 无序列表，OL = 有序列表。由于您似乎关心这些项目出现的顺序，因此在语义上会更正确。

标签： javascript jquery arrays numbers html-lists

【解决方案1】：

$("#imtheking li").each(function(index) {
  $(this).addClass('number' + index);
});

【讨论】：

【解决方案2】：

你可以这样做：

$('#imtheking li').each(function(index){
  $(this).attr('class', 'list_' + index);
});

输出将是：

<li class="list_0">List Item</li>
<li class="list_1">List Item</li>
<li class="list_2">List Item</li>
<li class="list_3">List Item</li>
<li class="list_4">List Item</li>
<li class="list_5">List Item</li>
<li class="list_6">List Item</li>

要保留与您类似的标记并只需添加类即可，您可以使用addClass：

$('#imtheking li').each(function(index){
  $(this).addClass('list_' + index);
});

【讨论】：

addClass 可能会更好 - 例如不删除现有的类等。

【解决方案3】：

你可以使用这个 jquery 插件：http://slightlymore.co.uk/ol/

来自他们的文档：

<ol id="first_example">
  <li>Item number 1</li>
  <li>Item number 2</li>
  <li>Item number 3</li>
  <li>Item number 4</li>
</ol>


$("ol#first_example").niceOrderedLists();

但是它没有添加一个类，但它可能会帮助你实现你想要做的事情。

【讨论】：