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 使用相同的类，我不希望切换显示/隐藏所有卡片 block 只显示该部分的卡片。我可以向每个卡片 block 添加 ID 或更具体的类。

我正在使用以下 js，它目前正在切换每个卡片实例，而不是只切换该部分。它还在两个 block 之间触发 Show More 和 Show Less:

$('.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() 获取第三个元素之后的所有元素并隐藏它们。请记住，所有这些元素仍将下载到浏览器，因此如果用户不展开它们，它们就会隐藏在 View 之外，基本上是浪费精力。更好的解决方案可能是仅加载前三张卡片，然后在需要时使用 Ajaxy 加载来加载其余卡片。

这里是你如何做你所要求的:

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>