Question

我有这个布局：

<div class="checkmark-outer">
    <div class="checkmark-33">
        <div class="fa-stack fa-1x checkmark-icon">
            <i class="fa fa-circle fa-stack-2x icon-background"></i>    
            <i class="fa fa-check fa-stack-1x icon-text"></i>
        </div>
        <div class="checkmark-inner">Option 1</div>
    </div>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>
    </div>
    <div class="checkmark-inner">Option 2</div>
</div>
<div class="fa-stack fa-1x checkmark-icon">
    <i class="fa fa-circle fa-stack-2x icon-background"></i>
    <i class="fa fa-check fa-stack-1x icon-text"></i>
</div>
<div class="checkmark-inner">Option 3</div>
</div>
</div>
</div>

使用JQuery是否有一种方法可以让我限制checkmark-outer里面的checkmark-33 div的数量，然后说当你点击这个div时

<div class="read-more-show">Show More</div>

它加载checkmark-33中的所有div？到目前为止我有这个，但我似乎只能让这个工作onload，当我将它应用到按钮时它什么都没改变？

jQuery(document).ready(function(){    
    jQuery('.checkmark-outer > .checkmark-33').slice(6).remove();
});

提前致谢！

Answer 1

请查看此演示

https://jsfiddle.net/pkwhd9vq/

你必须先修复你的HTML，

   <div class="checkmark-outer">
    <div class="checkmark-33">
    <ul>
    <li>
        <div class="fa-stack fa-1x checkmark-icon">
            <i class="fa fa-circle fa-stack-2x icon-background"></i>    
            <i class="fa fa-check fa-stack-1x icon-text"></i>
        </div>
        <div class="checkmark-inner">Option 1</div>
    </li>
    <li>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>
    </div>
    <div class="checkmark-inner">Option 2</div>
</li><li>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>


    </div>

    <div class="checkmark-inner">Option 3</div>
        </li>
        </ul>
        </div>
    </div>

    <div class="read-more-show">Show More</div>

然后添加你必须找到所有列表项和slicewith jquery

jQuery(document).ready(function(){    
$('.checkmark-33 ul').each(function(){ 

$(this).find('li').slice(2).wrap("<ul class='hide'></ul>");

});
$('.read-more-show').on("click",function(){
$(".hide").toggle();
});
});

然后用css隐藏包装器潜水

.hide{
  display:none;

}

使用JQuery限制重复div的数量

1 个答案: