计算 ul 中 li 的数量并分配 class

Question

我有动态显示在存档页面上的 woocommerce 子类别。我需要能够计算该列表中有多少个，并根据数字向 ul 添加 class。我的计划是使用新的 class，然后在我的 css 中使用 nth-child() 作为样式。所以如果有 11 个列表项，将 product11 添加到 ul。如果有 5 个列表项，将 product5 添加到 ul。

我尝试了几个不同版本的 jquery 我在网上找到的计数代码。

$('.site-main .subcategories ul.products.columns-3').each(function(index){

if(index=2)$(this).addClass("products2");
else if(index=3)$(this).addClass("products3");
else if(index=5)$(this).addClass("products5");
else if(index=6)$(this).addClass("products6");
 else if(index=7)$(this).addClass("products7");
else if(index=9)$(this).addClass("products9");
else(index=11)$(this).addClass("products11");

})

我得到的结果是它只在 products2 上添加了第一个 class。

Answer 1

无需清点物品。只需在 class 名称中添加索引：

$('.site-main .subcategories ul.products.columns-3').each( function(index){
    $(this).addClass("products" + index);
})

编辑：

我又看了一遍题目，我觉得他是想根据ul中的li个元素的总数加一个class。试试这个代码：

$('.site-main .subcategories ul.products.columns-3').each( function(){
    $(this).addClass('products' + $('ul.products li').length);
})

计算 ul 中 li 的数量并分配 class

Count number of li's in a ul and assign class

javascript

jquery

counting