Jquery - 按类获取下一个元素并隐藏当前元素

Question

我正在尝试通过单击“加载更多”div 来显示部分内容(每个部分有 5 个位置)，但坚持按类获取下一个元素。
为了更好地查看这里是 jsfiddle 上的示例 - https://jsfiddle.net/8ya7bbm2/1/
问题出在最后一行:

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(); // working
   // $(this).hide().next('.loadMore').show(); NOT WORKING...

主要思想是，在显示所有内容之后，必须隐藏“加载更多”，以便用户可以理解这是所有内容。目前我几乎完成了我想要的，但是 .next 没有按我预期的那样工作。当我使用 .nextAll 时效果很好，但我只需要按类的下一个元素，而不是该类的所有下一个元素。
也可能这个版本有点难看，有更简单的方法来做这样的事情吗？

Answer 1

您可以使用 .first() 仅定位匹配集中的第一个元素:

$(this).hide().nextAll('.loadMore').first().show();

Working Demo