jquery - 仅显示前 6 个 child (JQuery)

Question

我有这个样本:

https://jsfiddle.net/trud4930/1/

这是 HTML 代码:

<div class="parent">
<div class="parent2">
    <div class="child1"></div>        
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>

</div>

这是 CSS 代码:

    .child1
{
    width:50px;
    height:50px;
    background:blue;
    margin-top:10px;
}

.none{display:none;}

这是 JQuery 代码:

jQuery(document).ready(function($) {

$(document).ready(function(){
    $( "parent2:lt(6)" ).css( "background:red" );
    var max=0;
    if(max<=6)
    {
        //   display:normal
    }else
    {
        //addClass .NONE
    }       


    });

});

我希望只显示前 6 个 child 并更改 background-color

我该如何解决这个问题？

提前致谢!

Answer 1

为什么要使用 jQuery，当你可以用纯 CSS 解决它时:

.child1:nth-of-type(-n+6) { /* the first six */
    background: red;
}
.child1:nth-of-type(n+7) { /* all but the first six */
    display: none
}

Updated Fiddle