点击加载更多目标接下来三个sibilings然后接下来三个sibilings，而不使用循环

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;
}

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

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>