Question

我试图实现一个脚本，根据div中元素的数量添加一个类。我有这个工作，但发现它很难扩展，所以它运行在每个发现的类。（抱歉措辞不好）。示例如下：

的jQuery

$(".flex-container").each(function() {

var numItems = $('.btn').length;

if(numItems==10||numItems==9){
    $('.btn').addClass('flexten');
    }else if(numItems==8||numItems==7){
    $('.btn').addClass('flexeight');
    }else if(numItems==6||numItems==5){
    $('.btn').addClass('flexsix');
    }else if(numItems==4||numItems==3){
    $('.btn').addClass('flexfour');
    }
});

HTML

<div class="flex-container">
<a href="#" class="btn btn-default btn-lg">Text</a>
<a href="#" class="btn btn-default btn-lg">Text</a>
<a href="#" class="btn btn-default btn-lg">Text</a>
<a href="#" class="btn btn-default btn-lg">Text</a>
</div>

上面的话很好但是当我尝试添加一个具有相同类名（flex-container）的新div时，.btn的计数仍然会增加，因此每个div的addClass值都不固定。

基本上，我希望每个div都应用计数，因此每个都添加了一个准确的addClass名称。希望这对我想要达到的目标有意义。

jQuery不是我的强项，所以任何帮助都会非常感激。

干杯

Answer 1

问题是$('.btn').length会返回页面中包含.btn类的元素总数。

请尝试以下行计算每个div的子数：

var numItems = $(this).children().length;

然后使用此行将类添加到所选div的.btn子级：

$(this).children('.btn').addClass('flexfour');

我还建议添加一个else语句来捕捉有更多或更少孩子的场景。

Here is a jsFiddle.希望这有帮助！

对于每个类，count元素和addClass - jQuery

1 个答案: