I am currently working on a feature that involves showing part of the content (5 positions at each part) when clicking on the "load more" button. However, I am facing difficulties in selecting the next element by class.
For a clearer demonstration, you can refer to this example on jsfiddle - https://jsfiddle.net/8ya7bbm2/1/
The issue lies in the final line of code:
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('.loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').slideDown();
$(this).hide().nextAll('.loadMore').show(); // functioning as intended
// $(this).hide().next('.loadMore').show(); NOT WORKING...
The main objective is to hide the "load more" button once all the content has been shown, indicating to users that there is no more content to load. While I have almost achieved my goal, the .next method is not behaving as expected. The .nextAll method works well, but I specifically require only the next element with the specified class.
Perhaps there is a cleaner or more efficient way to accomplish this task?