Question

我有这个样本：

这是代码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个孩子并更改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

Answer 2

display only the first 6 children and change the background-color

您需要使用：

 $(".parent2 div").hide();
 $(".parent2 div:lt(6)").css("background","red").show();

<强> Working Demo

Answer 3

如果要在jQuery中动态选择它们，可以使用slice（）方法。这是一个例子（只需在切换类中放置display：none来隐藏它们）：

＆＃13;

$('button').on('click', function() {
  $('.child').slice(0, 6).toggleClass('toggled');
});

＆＃13;

.toggled {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
  <div class="child">lorem</div>
</div>
<button>Change first 6</button>

＆＃13;

Answer 4

我认为这也符合你的需要; （我更喜欢@ LinkinTed的答案）

    $( ".parent" ).find("div[class^=child]:lt(6)").css( "background","red" );
    $( ".parent" ).find("div[class^=child]:gt(5)").addClass( "none" );

https://jsfiddle.net/trud4930/6/

仅显示前6个子项（JQuery）

4 个答案: