jQuery隐藏并显示第n项后的div列表

Question

更新以包含基本的Fiddle：http://jsfiddle.net/g28nc89t/1/

假设我有一组div，它使用的是重复模式，而不是无序列表，它遵循以下结构：

<div class="one cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

<div class="two cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

使用jQuery，我如何隐藏第三项后的每一张“卡片”，并创建一个按钮来显示/隐藏隐藏的卡片。考虑到卡片UI使用相同的类，我不希望切换显示/隐藏所有卡块只用于该部分的卡片。我可以在每个卡块中添加id或更多的特定类。

我正在使用下面的js，它当前正在切换每个卡片实例与仅切换该部分的每个卡实例。它还在两个块之间翻转显示更多和显示更少：

$('.cards').each(function(){
    var max = 2
    if ($(this).find(".card").length > max) {
        $(this)
            .find('.card:gt('+max+')')
            .hide()
            .end()
            .append(
                $('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
                $('.card:gt('+max+')').toggle();
                    if ( $('.more').length ) {
                        $(this).html('<a class="less">Show Less</a>');
                    }  else {
                        $(this).html('<a class="more">Show More</a>');
                    };
                 })
             );
    }
});

该网站是响应性的，虽然我希望有某种幻灯片/滑行动画，但我不认为它在这种情况下是可行的。任何帮助都将不胜感激。我尝试使用这个堆栈作为指南：Jquery, hide & show list items after nth item

Answer 1

您可以使用jQuery的slice()获取第三个元素之后的所有元素并隐藏它们。请记住，所有这些元素仍将被下载到浏览器中，因此如果用户不展开它们，它们就会被隐藏在视图之外，基本上是浪费精力。一个更好的解决方案可能是只加载前三张卡，然后在需要的情况下使用最好的负载来加载其余的卡。

以下是你如何做你想做的事：

http://codepen.io/anon/pen/Qwmvmx

​

$( document ).ready(function() {
  cards = $('.cards');
  $.each(cards, function(key,value) {
    $(this)
      .find('.random_cms-class')
      .slice(3)
      .hide(); 
  });
  $('.show_more').show();
});

$('.show_more a').click(function() {
  $(this).parent().parent().find(":hidden").show();
});

.random_cms-class {
  display: inline-block;  
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>
<div class="two cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>

​