Question

我正在尝试通过点击＆＃34;加载更多＆＃34;来实现部分内容的显示（每个部分5个位置）。 div但坚持按类获取下一个元素。
为了更好地查看，这里是关于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...

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

Answer 1

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

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

<强> Working Demo

Answer 2

next()在这种情况下不起作用，因为next将仅在兄弟之后立即检查。您可以像.nextAll('.loadMore:first')一样使用。

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

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

2 个答案: