jquery - 点击加载更多目标接下来的三个 sibling 然后接下来的三个 sibling ，不使用循环

Question

<div class="mainone text-center">
    <ul class="imagelist list-inline text-center">
        <li><img src="images/img2.jpg"></li>
        <li><img src="images/img3.jpg"></li>
        <li><img src="images/img7.jpg"></li>
        <li><img src="images/img5.jpg"></li>
        <li><img src="images/img6.jpg"></li>
        <li><img src="images/img7.jpg"></li>
        <li><img src="images/img8.jpg"></li>
        <li><img src="images/img2.jpg"></li>
        <li><img src="images/img3.jpg"></li>
        <li><img src="images/img2.jpg"></li>
        <li><img src="images/img5.jpg"></li>
        <li><img src="images/img6.jpg"></li>
        <li><img src="images/img7.jpg"></li>
        <li><img src="images/img8.jpg"></li>
    </ul>
    <span class="loadmore"><h3>load more</h3></span>
</div>

$(document).ready(function(){
    jQuery.fn.exists = function() {
        console.log(this);
        return this.length > 0;
    }

    var lisiz = $('ul.imagelist li').size();
    $('ul.imagelist li:lt(3)').addClass('active');

    $('.loadmore').on('click', function() {
        for (var i = 0; i < 3; i++) {
            if ($('ul.imagelist li.active').last().next('ul.imagelist li').exists()) {
                $('ul.imagelist li.active').next('ul.imagelist li').addClass('active');
            } else {
                alert('all' + lisiz +' images showen, No images to show');
                $('.loadmore').text('All'+" " + lisiz +' images showen, No images to show');
                i = 3;
            }
        }
    });
});

* {
    margin: 0;
}
ul.imagelist li {
    width: 20%;
    min-width: 300px;
    margin: 5px;
    display: none;
}
ul.imagelist li img {
    width: 100%;
    height: 200px;
    vertical-align: top;
}
ul.imagelist li.active {
    display: inline-block;
}
.loadmore {
    cursor: pointer;
    color: red;
}

点击加载更多目标接下来的三个 sibling ，然后接下来的三个 sibling 不使用循环。在上面我使用了一个循环，但是我如何在没有一个的情况下将类添加到接下来的三个元素？

Fiddle link

Answer 1

试试这个方法。

$('ul.imagelist li:lt(3)').addClass('active');
var lisiz = $('ul.imagelist li').size();
$('.loadmore').on('click', function() {
    $('ul.imagelist').find('li.active').last()
    .nextAll(':lt(3)').addClass('active');
    if (!$('ul.imagelist li').not('.active').length) {
        $('.loadmore')
       .text('All' + " " + lisiz + ' images showen, No images to show');
    }
})

$(document).ready(function() {
  $('ul.imagelist li:lt(3)').addClass('active');
  var lisiz = $('ul.imagelist li').size();
  $('.loadmore').on('click', function() {
    $('ul.imagelist').find('li.active').last().nextAll(':lt(3)').addClass('active');
    if (!$('ul.imagelist li').not('.active').length) {
      $('.loadmore').text('All' + " " + lisiz + ' images showen, No images to show');
    }
  })
});

* {
  margin: 0;
}
ul.imagelist li {
  width: 20%;
  min-width: 100px;
  margin: 5px;
  display: none;
}
ul.imagelist li img {
  width: 100%;
  height: 200px;
  vertical-align: top;
}
ul.imagelist li.active {
  display: inline-block;
}
.loadmore {
  cursor: pointer;
  color: red;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="mainone text-center">
  <ul class="imagelist list-inline text-center">
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
    <li>
      <img src="http://www.mvburke.com/images/limitededitionsfldr/simpole1.jpg">
    </li>
  </ul>
  <span class="loadmore"><h3>load more</h3></span>
</div>