Javascript 动态隐藏/显示下一个列表项。jQuery

我正在动态填充UL列表。这可能包含1到5项

我希望能够显示第一个列表项，然后单击该列表项中的按钮将其隐藏并显示下一个列表项

到目前为止，我有这个-

HTML结构

<ul class="grid">
   <li class="object">
     List Item 1
     <a class="show-next">Show the next list item</a>
   <li>
</ul>

不幸的是，这段代码显示的是UL中的所有列表项，而不是下一个

有人帮我吗

谢谢

尝试添加

.removeClass(active);

---

您可以更改代码，以便向活动元素添加一个

active

类，因为现在

$（“.grid”）.find（“.object”）

正在查找

ul

中的所有

li

对象，隐藏它们，查找每个元素的下一个同级，然后显示这些元素。。。这将显示列表中的每个元素。如果将

active

类添加到当前活动的按钮中，将阻止您的查询在

ul

中查找所有

li

元素

例如：

$('.show-next').click(function(ev){
    $(".grid").find(".object.active").hide().next().show().addClass("active");
    $(this).parent().removeClass("active");
});

这是怎么回事：我已经更新了代码，我相信它现在包含了您要求的所有功能

$(document).ready(function () {

    $('.object').hide();

    var clickListArray = $('.object').toArray();

    $(clickListArray[0]).show();



    $('.show-next').on("click", function () {
        var thisParent = $(this).parent();
        var nextInList = $(thisParent).next();
        $(thisParent).hide();
        $(nextInList).show();
    });

});

---

您的

li

的结束标记缺少反斜杠，例如

而不是

除此之外，请尝试以下方法：

$('.grid .object').hide().filter(':lt(1)').show();

$('.show-next').click(function(){
    $(".grid").find(".object").hide();
    $(this).parent().next().show();
    return false;
});

我在此列出了一个小提琴示例：

请注意，没有检查是否是列表中的最后一项

此外，如果您想在动态创建的元素上使用它，则需要执行以下操作

$(document).on('click', '.show-next', function() {

---

相反

首先，您没有用

关闭每个列表项。您可以借助

parent（）

查找所单击元素的父元素，然后可以隐藏它，并可以使用

next（）

$（'.grid.object'）.hide（）.filter（':lt（1）'）.show（）；
$（'.show next'）。单击（函数（）{
$（this）.parent（）.hide（）.next（）.show（）；
});



清单项目1
显示下一个列表项


清单项目2
显示下一个列表项


清单项目3
显示下一个列表项


清单项目4
显示下一个列表项


清单项目5
显示下一个列表项

下面是代码

<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。该评论如何不回答问题？如果添加到他的脚本函数中，它将在您打开下一个脚本时隐藏li。嗨，Jason-谢谢您的回答-我可能会使用此方法，但是removeClass不会删除该类。我现在在列表项中的几个div中有了锚。这是否会导致很难找到父母？可能是重复的
<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
   $eL = $('.grid .object').filter(":visible");
  //  $(".grid").find(".object").hide().next().show();
    if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('.grid .object')[0].show();
          }
});