使用 JQuery 限制重复 div 的数量

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 有没有办法让我 onload 限制 checkmark-outer 内的 checkmark-33 divs 的数量说 2 然后当你点击这个 div

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

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

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

隐藏 wrapper dive

.hide{
  display:none;

}

使用 JQuery 限制重复 div 的数量

Limit number of repeated divs using JQuery

html

javascript

css

jquery

limit