使用 JQuery 限制重复 div 的数量答案

【问题标题】：Limit number of repeated divs using JQuery使用 JQuery 限制重复 div 的数量
【发布时间】：2016-02-16 10:39:22
【问题描述】：

我有这个布局：

<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 div 的数量说 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();
});

提前致谢！

【问题讨论】：

您的 HTML 似乎有一些不匹配的 div 开始/结束标签。
请去掉不必要的关闭div
如何将它添加到按钮中？您无法从 DOM 中删除某些内容，然后在不重新加载页面的情况下使其重新出现 - 为每个您想要的类和 2 个以上的类运行一个，添加隐藏它们的类，然后当您单击按钮时只需删除该类 - 实际上只需将它们全部隐藏并在每个循环中显示前两个，然后在按钮单击时全部显示

标签： javascript jquery html css limit

【解决方案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>

然后添加你必须找到所有列表项并使用 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;

}

【讨论】：