Jquery 如何循环.next（）？

我有3个DIV与同一个类，我添加类'选定'到下一个DIV点击和删除它从上一个类，它的工作很好，但我想循环它

目前是从1-->2-->3开始，我希望它循环，3-->1，请帮助

HTML

JS

---

JS Fiddle Link:

最简单的方法就是检查

.next（）

是否存在，如果不存在，则选择第一个

var $next = $('.section.selected').removeClass('selected').next('.section');
if ($next.length) {
    $next.addClass('selected'); 
}
else {
    $(".section:first").addClass('selected');
}

---

我不确定我是否应该声称这在每种情况下都有效，但我一直想知道是否有可能进展到最后一个无效。这是我得出的结论：

$('#button').click(function(){
    $('.selected + .section, .section:eq(0)')
        .last().addClass('selected')
        .siblings('.selected').removeClass('selected');
});

这样做的目的是首先选择

之后的
.section
。selected

：

.selected + .section

我还添加了一个辅助选择器，以确保并获得至少一个匹配项：

, .section:eq(0)

在这个相对简单的示例中，上面表示第一个

$（'.section'）[0]

。然后，我对复合选择的结果使用

.last（）

，给出结果

[1]

（对于有效的

.next（）

匹配）或

[0]

进行第一次匹配（请参阅，

.last（）

将给出first和last，如果列表中只有一个结果）

虽然选择器的顺序似乎与使用

.last（）

相反，但这似乎比使用

.first（）

更有效，对此我不一定理解其原因。这是，所以我按照他们在选择中的方式来订购

那么，剩下的就简单了。将类添加到选择器返回的

.last（）

中，然后使用

.selected

（唯一的另一个将是我们要从中选择的）找到（新选择的

.section

）的

.sides（）

，并将其删除为

.selected

类

---

它似乎起作用了。我想我想听听关于这是否可靠的任何评论。

我编写了一个类似这样的简单代码

var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});

咖啡脚本 我的简单咖啡脚本解决方案，我想我会与使用它的人分享：

$currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')

---

注意：确保将相应的

选择器

传递到

下一步（）

和

兄弟姐妹（）

如果循环/循环中不包含兄弟姐妹。

爆炸药丸，您介意看看我的答案吗？我想知道你是怎么想的。您上面提到的是我在发布之前的第一个想法，所以我开始尝试另一种方法。@JaredFarrish这是一个很酷的解决方案，但我只是有点担心选择器的依赖性，它实际上是按顺序构建集合的（例如，什么会阻止它生成

。section:eq（0）

last随时可用？您还将得到更多的方法调用这与我的问题相同，我不确定

.last（）的机制

。我不会说它是随意使用方法的；它比你的方法多了一个，这是因为如果你不在else中计算重新选择的次数……我怀疑@BoltClock判断结果以DOM顺序返回是正确的，在这种情况下，这将有利于排序（在结果中，

：eq（0）

总是排在第一位）。如果有什么方法可以证明这一点，我想它会工作得很好。这是

：eq（）

，

：first

和

：last

对我来说最令人困惑的方面之一。我不知道这些选择器在诸如选择器组之类的上下文中使用时，以及在前面使用组合符时是如何工作的（例如

.foo:eq（0）.bar

）。我猜这里发生的是

:eq（0）

从整个表达式

.selected+.section，.section

，即使您放置

。section:eq（0）

首先。这似乎很奇怪，但这是我能想到的唯一合理的解释。我明白你的建议。既然

：eq（0）

在那里，它将其视为第一个结果，而不管选择器语句的其余部分。我想这有点道理（？），但奇怪的是，它不会按给定的顺序返回选择器的结果（我将尝试使用

document.querySelectorAll（）

测试它是否匹配）。我从未考虑过选择所陈述的内容可能会以与给定内容不同的顺序返回，或多或少是按元素索引排序的（对吗？。

document.queryselectoral（）

将永远不会匹配，原因很简单，

：eq（）

不是有效的CSS选择器（它只是一个）也就是说，

document.querySelector（'.selected+.section，.section'）

（不带

All

）的工作方式类似于

：eq（0）

/

：首先

：我收集到元素总是按照它们在DOM中出现的顺序返回。那么，没关系（我原以为它是一个实际的选择器，但我把它与

nth-child（）

混淆了。）。我可能应该看看jQuery定义。这一部分是我不太确定它在实际中如何发挥作用的部分。简单地说，它在一组匹配中使用一个元素的基于0的索引。在这种情况下，可以使用

$（'.selected+.section，.section'）.eq（0）。last（）

相反，因为选择器语法非常混乱。（旁注：我讨厌jQuery混乱的选择器语法。）这是对已接受答案的公然剽窃/偷懒重写。无论如何，这不会给问题带来任何新的东西。@Hybridwebdev这当然不是我的本意。公平地说，我也投了正确的答案。我不想偷选票，只是想帮点忙。我认为这个答案仍然有价值，所以我会留下它。但无论如何如果您觉得这样做弊大于利，管理员应该进行审查。

, .section:eq(0)

var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});

$currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')