我想在我的网站上添加一个加载更多按钮，只有jQuery（没有Ajax）。我的HTML图像部分结构是一个与一些插件混合的元素列表，如lightbox。
我尝试了许多jQuery技巧，即使是这个小提琴，但没有机会：
http://jsfiddle.net/cse_tushar/6FzSb/
这是我的图片代码加载更多按钮：
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<ul id="portfolio-container" class="portfolio-container real-gapped colored-mask masonry clearlist row portfolio-hover-effect">
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
<li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12">
<div class="portfolio-item-img">
<img src="http://placehold.it/400x260" alt="portfolio" />
</div>
<div class="portfolio-item-info font-second">
<h3 class="portfolio-item-title">sweet nicky</h3>
<div class="portfolio-item-detail">
<p>apiente accusantium fugiat</p>
<!-- LightBox Button -->
<a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a>
<!--/ End LightBox Button -->
</div>
</div>
</li>
</ul>
<div class="small-section text-center">
<a href="#" id="loadMore" class="btn btn-animated btn-split btn-dark ripple-alone" data-text="Load more"><span> Load more .. </span></a>
</div>
</body>
</html>
请帮忙！
答案 0 :(得分：0)
我假设您知道其他图片的网址。如果你将它们放在一个数组中，你可以在概念上做这样的事情：
var moreImages = [
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/",
"http://lorempixel.com/72/72/"
];
$("#more").on("click", function(){
if (moreImages.length === 0) { return; }
var target = $("#imageContainer");
moreImages.splice(0,3).forEach(function(item){
target.append("<li><img src=\"" + item + "\" /></li>");
});
});<ul id="imageContainer">
<li><img src="http://lorempixel.com/72/72/" /></li>
<li><img src="http://lorempixel.com/72/72/" /></li>
<li><img src="http://lorempixel.com/72/72/" /></li>
</ul>
<button id="more">more</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>