Question

I have a list of divs. I only let the 3 last show, and I need to show the 3 more at a time when pressing a button.

$(function() {
  $(".container .item").each(function() {
    $(this).parent().find(".item").slice(0, -3).hide();
  });

  $(".container .more").click(function() {
    $(this).closest(".container").find(".item").slice(0, -6).show();
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="more">Show 3 more</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
</div>

How can this be done? Keep in mind that there are multiple .container divs and I only want it to show from the container the more button is in.

Answer 1

I'd do it like this:

$('.container').each(function() {
  $(this).find('.item:gt(2)').hide()
});
$('.container .more').click(function() {
  $(this).parent().find('.item:not(:visible):lt(3)').show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="more">Show 3 more</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
</div>
<div class="container">
  <div class="more">Show 3 more</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
</div>

This hides all the items divs except the first three per container, then upon clicking the more button it displays the next three not visible .more divs

Answer 2

另一种解决方案：

＆＃13;

$( document ).ready(function() {
    $('.container').each(function() {
        $(this).closest(".container").find(".item").slice(0,-3).hide();
    });
    $('.container .more').click(function() {
        $(this).closest(".container").find(".item:hidden").slice(-3).show();
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="more">Show 3 more</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
</div>
<div class="container">
  <div class="more">Show 3 more</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
  <div class="item">Hello world</div>
</div>

＆＃13;

这会隐藏除每个容器的前三个之外的所有项目div，然后在单击更多按钮时显示接下来的三个不可见.more divs

Answer 3

认为你错过了一个活动。尝试将其包装在其中。

    $(document).ready(function(evt) {

});

或者看看这个jsFiddle

Show 3 hidden divs at a time

3 个答案: