jQuery在第一次匹配后获取下一个元素

我想我的问题可能很简单，但在尝试了不同的方法后，我还是不明白

我想要实现的UI基本上如下所示：

<ul class="slideshow">
    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" class="pic-act"><img src="1.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="2.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="3.png"  class="thumb" /></a></li>
    <li><a href="#" id="prev">Next</a></li>     
</ul>

-上一幅|图像1（活动）|图像2 |图像3 |图像n |下一幅-

我想允许用户通过按“下一步”或“上一步”按钮更改活动图像

my UI的HTML如下所示：

<ul class="slideshow">
    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" class="pic-act"><img src="1.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="2.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="3.png"  class="thumb" /></a></li>
    <li><a href="#" id="prev">Next</a></li>     
</ul>

不幸的是，此代码无法找到下一个非pic act元素：(

我的第二个要求是当用户到达最后一个li元素并再次按下“下一步”按钮时，第一个li元素变为活动状态。（与“上一步”按钮相同）

我希望这是有道理的

非常感谢您！这应该行得通

 $(document).ready(function() {
   $("#next").click(function(){ 
      var elem = $(this).prev(".pic-art");// once you got here you would compare to anchor tag id last for second requirement
      var nextele = elem.find(".pic");
      elem.addClass("pic");
      elem.removeClass("pic-act");
      nextele.addClass("pic-act");
      nextele.removeClass("pic");
    }); 
 });

对于第二个需求，您可以只向

first

和

last

锚定标记添加一个id，并将选择器与之进行比较，然后从那里开始

可能是这样的：

$(function(){
        $('#next').click(function(){
                var $elem = $('.slideshow .pic-act').removeClass('pic-act').addClass('pic').next('.pic');
                if ($elem.length < 1){
                        $('.slideshow .pic').eq(0).addClass('pic-act').removeClass('pic');
                }else{
                        $elem.removeClass('pic').addClass('pic-act');
                }
        });     
});

$（函数（）{
$（“#下一步”）。单击（函数（）{
var$elem=$（'.slideshow.pic act'）.removeClass（'pic-act'）.addClass（'pic'）.next（'.pic'）；
如果（$elem.length<1）{
$（'.slideshow.pic'）.eq（0）.addClass（'pic-act'）.removeClass（'pic'）；
}否则{
$elem.removeClass（'pic'）.addClass（'pic-act'）；
}
});     
});

我看到您的代码的主要问题是，您在全局空间中并排查找两个元素，而不是查找当前选定的元素，然后遍历兄弟元素

如果您正在创建一个幻灯片作为一个学习练习或个人项目，我建议您研究一下其他纯代码答案中所暗示的内容。您编写代码的方式表明，您可能仍在试图理解jQuery是如何结合在一起的，花些时间阅读优秀的文档可能是一个好主意在jQuery的网站上，学习一些教程和/或获得一本jQuery书籍。提示：链接非常棒

---

如果你正在为一个专业项目创建幻灯片，我建议你找一个由其他人创建的插件。它会花费更少的时间，而且质量可能更高，因为它是由一个对jQuery/JS有丰富经验的人创建的（我将我的幻灯片演示实现与专业人员的实现进行了比较：专业人员的实现远远高于我的实现）.

这只是第一个要求，对于第二个要求，只需在最后一张图片上隐藏下一张，或者在第一张图片上隐藏上一张，会更容易，但是如果你不想走这条路，我在回答中留下了一个想法，关于如何完成它，这看起来可能会奏效……但是，通过提供解决方案，我觉得你没有教给我答案提问者：关于如何解决未来这样的问题。