jQuery - 索引编号标记元素的问题

Question

我正在构建一个适用于多个无序列表的jQuery插件。我希望能够为每个列表中的每个li标签赋一个索引编号的类名，从每个列表中的1开始，如下所示：

<ul class="ui-tabs-panel">
    <li class="col-1">column 1</li>
    <li class="col-2">column 2</li>
    <li class="col-3">column 3</li>
</ul>
<ul class="ui-tabs-panel">
    <li class="col-1">column 1</li>
    <li class="col-2">column 2</li>
    <li class="col-3">column 3</li>
</ul>

这是我用来做的代码：

$('.ui-tabs-panel').find('li').each(function(i) {
    $(this).addClass('col-' + (i+1));
});

但相反，输出是这样的：

<ul class="ui-tabs-panel">
    <li class="col-1">column 1</li>
    <li class="col-2">column 2</li>
    <li class="col-3">column 3</li>
</ul>
<ul class="ui-tabs-panel">
    <li class="col-4">column 1</li>
    <li class="col-5">column 2</li>
    <li class="col-6">column 3</li>
</ul>

不是从每个ul的1重新开始，而是继续，好像它没有为一组全新的li标签编号。

我需要做些什么才能让每个新的ul开始计算？

Answer 1

您将在一大批中浏览所有LI个。您必须单独浏览每个LI的{​​{1}}：

要重新启动每个UL的计数器，您必须使用嵌套的UL es。

.each()

Try it out with this jsFiddle

请注意，您可以动态使用 nth child pseudo selector ，而不是使用类。

例如，要选择每个$('ul.ui-tabs-panel').each(function() { // Get al ULs with .ui-tabs-panel $(this).find("li").each(function(i) { // Go through each LI of this UL $(this).addClass('col-' + (i+1)); // Add the right class }); }); 中的第二个Li：

UL.ui-tabs-panel

Try it out with the jsFiddle (hides the second LI in each UL)