如何为每个li元素添加一个带有元素数量的类？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为每个li元素添加一个带有元素数量的类？相关的知识，希望对你有一定的参考价值。
我有这样的html代码。
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
我想给每个元素加一个类。
<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>
<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>
但我得到的是：
<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>
<ul class="tab-li">
<li class="li4">one</li>
<li class="li5">two</li>
<li class="li6">three</li>
</ul>
我的代码不能用，因为它把所有的元素都算进去了，而且在第二段的 <ul> 是继续前一个数 <ul>. 我如何让它们各自独立？
我的jQuery代码。
$('ul.tab-li li').each(function(i){
$(this).addClass('li'+(i == 0 ? i+1:i+1))
$(this).text($(this).attr('class'))
})
这里是我的代码的一个例子。https:/jsfiddle.netLynsvbgd
答案
为了让这个工作如你所愿，你需要两个循环。一个穿过每个 .tab-li 和另一个通过 li 在该元素内。
$('ul.tab-li').each(function() {
$(this).find('li').each(function(i) {
let classname = 'li' + (i + 1);
$(this).addClass(classname).text(classname);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>另一答案
使用mod操作符。
$('ul.tab-li li').each(function(i){
let classNumber = (i % 3) + 1;
$(this).addClass('li'+classNumber)
$(this).text($(this).attr('class'))
})
另一答案
你可以使用jQuery的 .index() 方法来获取父列表中每个列表项的索引。
这种方法很稳健：它只使用一个循环，无论列表中的列表项数量多少，都可以工作，而且在有嵌套列表的情况下也可以工作。
$('ul.tab-li li').each(function() {
$(this).addClass(`li${$(this).index() + 1}`);
});li:after {
content: attr(class);
padding-left: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>以上是关于如何为每个li元素添加一个带有元素数量的类？的主要内容，如果未能解决你的问题，请参考以下文章