I am using jQuery to create a “load more posts” effect for the WordPress loop.
Since the loop has all the posts already loaded and they just appear with jQuery I have not been able to hide the “load more” button when I reach the last one.
$(document).ready(function () {
$(".post").addClass("hide");
total = $("#allpost .post").size();
x = 3;
$('.loadmore').click(function () {
//y = x;
$(total);
$(".post").removeClass("hide");
$(".post:gt("+x+")").addClass("hide");
x = x + 1;
});
});
My loop
<div id="all-posts">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
'posts_per_page' => 100,
'paged' => $paged
);
query_posts($args); ?> <!-- posts per page -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $postcount++;
$new_class = ( ($postcount % 2) == 0 ) ? "even" : "odd"; ?>
<div <?php post_class($new_class) ?> id="post-<?php the_ID(); ?>">
<div class="post_image">
<a href="<?php echo the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail('custom-size'); // post thumbnail
}?>
<button class="blog_button">Vaata</button></a>
</div>
<div class="post_tekst">
<div class="lisakast">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
</div>
</div><!-- odd / even div -->
<?php endwhile; endif; ?>
<div class="loadmore">Lae juurde</div>
</div><!-- all posts -->
JSFiddle: https://jsfiddle.net/hd4603gj/7/
How could this be achieved?
You only need to add an extra validation at your JS code.
When all posts are visible, then hide the “load more” button
You can use the following code:
The number of elements currently matched. The
.size()
method will return the same value. To get more information about.length()
: ClickDemo: Fiddle