带有非选择器的 JQuery.Next() 未按预期工作答案

【问题标题】：JQuery.Next() with not selector not working as expected带有非选择器的 JQuery.Next() 未按预期工作
【发布时间】：2012-01-11 16:25:12
【问题描述】：

我正在尝试设置一个旋转面板，但是我有三种状态：活动、非活动、禁用。

我只想在活动和非活动面板之间旋转并跳过禁用的面板。如果没有更多非活动面板旋转回第一个面板。

但是，使用下面的代码单击按钮，它将选择面板 1，然后选择面板 2，然后返回面板 1，而不是选择面板 5。如果我从下面的粗体部分删除非选择器，它会按预期工作。我认为这是我对下一个运营商的理解（或缺乏理解）。有什么想法吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(function () {
        $("#rotate").click(function () {
            var ActivePanel = $('.active');                 //Get the current active panel 
            var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active. 
            if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel

            console.log("Active Panel: ", ActivePanel);
            console.log("Next Panel: ", NextPanel);

            $(ActivePanel).removeClass("active").addClass("inactive");
            $(NextPanel).removeClass("inactive").addClass("active"); 
        });
    });    
    </script>
</head>
<body>
    <button id="rotate">Rotate Active Panel</button>
    <div id="panel1" class="active"><p>Some Content</p></div>
<div id="panel2" class="inactive"></div>
<div id="panel3" class="inactive disabled"></div>
<div id="panel4" class="inactive disabled"></div>
<div id="panel5" class="inactive"></div>
</body>
</html>

【问题讨论】：

标签： jquery next

【解决方案1】：

next 方法只返回与选择器匹配的直接兄弟。使用the nextAll method.

尝试以下方法：

$("#rotate").click(function() {
  var activePanel = $('.active'); //Get the current active panel 
  var nextPanel = activePanel.nextAll('.inactive').not('.disabled').first(); //Get the next panel to be active. 
  if (!nextPanel.length) {
    nextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel
  }

  console.log("Active Panel: ", activePanel);
  console.log("Next Panel: ", nextPanel);

  $(activePanel).removeClass("active").addClass("inactive");
  $(nextPanel).removeClass("inactive").addClass("active");
});

See here for jsFiddle.

【讨论】：

这只是在 panel1 和 panel2 之间旋转。
@rich.okelly：您的回答对我帮助很大！感谢您发布...它让我了解了我应该如何处理当前场景（带有下一个/上一个按钮的向导）。我需要转到下一个未回答的问题！惊人的。它现在正在工作...... :)

【解决方案2】：

尝试使用下一个兄弟~ 选择器，后跟嵌套的.class、:not(.class) 和:first 选择器

$("#rotate").click(function() {
    var ActivePanel = $('.active');
    var NextPanel = $(".active ~ .inactive:not(.disabled):first");
    if (NextPanel.length == 0) NextPanel = $("#panel1");    
    $(ActivePanel).removeClass("active").addClass("inactive");
    $(NextPanel).removeClass("inactive").addClass("active");
});

工作示例： http://jsfiddle.net/hunter/vfVBB/

Next Siblings Selector (“prev ~ siblings”)

描述：选择“prev”元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤“兄弟”选择器。

【讨论】：

这行得通，但我不明白为什么这行不通： var NextPanel = $(".active").siblings(".inactive:not(.disabled):first");
.siblings() 采用之前或之后的所有元素兄弟姐妹。这就是为什么第一个元素选择第二个元素，第二个元素选择第一个。
是的，我现在看到了。感谢您教我 '~' 选择器。格兰芬多10分。对于那些感兴趣的文档，这里是：api.jquery.com/next-siblings-selector
所以这本质上类似于nextAll。

【解决方案3】：

另一种方法

.nextAll(".inactive:not(.disabled):first")

【讨论】：