0

I am using jQuery to count divs and would like to have a class added once it counts 20. ie: divs 1-20 are class="box" and divs 21 + are class="box new"

This is what I have but it adds the "new" class to all the divs.

$(function() { 
    var divCount = $("#content").children(".box").length; 

    if (divCount > 20) { 
        $(".box").addClass("new"); 
    } 
});
4

5 回答 5

7 
$(".box:gt(20)").addClass("new");
于 2013-09-06T18:24:12.510 回答
3

只是想指出，您可以使用 nth-child 仅使用 CSS 来做到这一点。当然，如果您使用该类进行定位，您仍然可能希望使用 jQuery 路线：

div.box:nth-child(n+21) {
    ... new styles go here   
}

在此处查看更多信息：http: //css-tricks.com/useful-nth-child-recipies/

于 2013-09-06T18:28:44.397 回答
0

你的代码：

如果 (divCount > 20)

实际上是检查一个条件的真实性并向所有具有该类的元素添加一个“新”类，.box因为当您有超过 20 个 div 时，该条件通过了测试。

您想要做的是遍历元素并检查其中条件的真实性，如果它的索引高于 20 - 1，则将新类应用于当前元素（计数从零开始，因此您的元素的索引为 19将是你的第 20 个元素）。

$(function() {
    $.each($("#content").children(".box"), function(index, value){
        if ( index - 1 > 20 ) {
            $(this).addClass(".new");
        }
    });
});
于 2013-09-06T18:34:05.580 回答
0

考虑到您的代码如下所示： 如果有超过 20 个框，则将类 'new' 添加到所有具有类 'box' 的 div 中。因此，所有框都被选中。

在这种情况下，我推荐使用:gt()选择器：gt-selector - jQuery

所以：

$(function() { 
    $(".box:gt(20)").addClass("new"); 
});

如果您不确定要使用哪个选择器，可以使用此备忘单：Oscar Otero jQuery Cheatsheet

于 2013-09-06T18:25:46.567 回答
0

像这样的东西应该工作：

var i = 0;
$("#content").children(".box").each(function(i, k) {
   if(++i > 20) $(k).addClass("new");
});

或者

$("#content").children(".box").each(function(i, k) {
   if($(k).is(":gt(20)")) $(k).addClass("new");
});
于 2013-09-06T18:23:58.313 回答