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

【问题标题】：jQuery get next element after first matchjQuery在第一次匹配后获取下一个元素
【发布时间】：2009-11-04 18:27:39
【问题描述】：

我认为我的问题可能很简单，但是在尝试了不同的方法后我就是不明白。

我要实现的 UI 基本上是这样的：

-上一页 |图片 1（活动）|图 2 |图 3 |图片 n|下一个-

我想允许用户通过按 Next 或 Prev 按钮来更改活动图像。

我的 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>

我想创建一个 jQuery 脚本，它会找到第一个带有 pic-act 类的 li 元素和下一个带有 pic 类的元素。之后，我想从第一个元素中删除 pic-act 类并向其添加 pic 类，然后我想将 pic-act 类添加到第二个元素。

我尝试使用以下 jQuery 代码来完成此操作

$(document).ready(function() {
$("#next").click(function(){
    var next = $(".pic-act ~ .pic");
    $(next).attr("class", "pic-act");
    $(".pic_act:first").attr("class", pic);     
}); 
});

不幸的是，这段代码无法找到下一个非 pic-act 元素:(

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

我希望这是有道理的。

非常感谢您！

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

这应该可以工作

 $(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");
    }); 
 });

对于第二个要求，您可以添加一个 id 到 first 和 last 锚标记并将选择器与其进行比较，然后从那里开始

【讨论】：

这只是第一个要求，对于第二个要求，在最后一张图片上隐藏下一张或在第一张图片上隐藏上一张会更容易，但如果你不想走我离开的那条路线我的回答中关于如何完成它的想法

【解决方案2】：

也许是这样的：

$(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');
                }
        });     
});

【讨论】：

这看起来可能会奏效......但仅提供解决方案，我不觉得你已经教过提问者任何关于如何解决未来这样的问题的知识。

【解决方案3】：

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

如果您将创建幻灯片作为学习练习或个人项目，我建议您查看jQuery traversing documentation，正如其他纯代码答案中所暗示的那样。您编写代码的方式表明您可能仍在尝试了解 jQuery 是如何组合在一起的，花一些时间阅读 jQuery 网站上的优秀文档、学习一些教程和/或获取一本 jQuery 书籍可能是个好主意.提示：链接很棒

如果您要为专业项目创建幻灯片，我建议您找一个由其他人创建的插件。这将花费更少的时间，并且可能具有更高的质量，因为它将由具有丰富 jQuery/JS 经验的人创建（我将我的幻灯片实现与专业的实现进行了比较：专业的比我的）。

【讨论】：