对于每个 class，计数元素和 addClass - jQuery

Question

我正在尝试实现一个脚本，该脚本根据 div 中的元素数量添加 class。我有这个工作但发现很难扩展以便它在找到的每个 class 上运行。（抱歉措辞不当）。示例如下：

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>

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

的值不固定

基本上，我希望根据 div 应用计数，因此为每个添加一个准确的 addClass 名称。希望这对我想要实现的目标有意义。

jQuery 不是我的强项所以任何帮助将不胜感激。

干杯

Answer 1

问题是 $('.btn').length returns 页面上的元素总数 .btn class.

尝试下面的行来计算每个 div 的 children 数：

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

然后使用此行仅将 class 添加到所选 div 的 .btn child：

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

我还建议添加一个 else 语句来捕获或多或少 children.

的情况

Here is a jsFiddle.希望对您有所帮助！

对于每个 class，计数元素和 addClass - jQuery

For each class, count elements and addClass - jQuery

jquery

each

addclass