Question

我有3个具有相同类的div，我在点击时将“选择”类添加到NEXT DIV并从之前的类中删除它，它工作正常但我想循环它

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

HTML

<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

CSS

.selected{background:red}

JS

$('#button').click(function(){
    $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
});

JS小提琴链接：http://jsfiddle.net/madhuri2987/KK66g/2/

Answer 1

最简单的方法就是检查.next()是否存在，如果不是“选择”第一个。

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

http://jsfiddle.net/KK66g/3/

Answer 2

我不确定我是否应该在每种情况下声明这项工作，但我一直想知道是否有可能在最后一次无效时进展到第一位。这就是我的工作：

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

http://jsfiddle.net/userdude/9UFD2/

这样做首先选择.section之后的.selected：

.selected + .section

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

, .section:eq(0)

上面代表第一个$('.section')[0]，在这个相对简单的例子中。然后我对复合选择的结果使用.last()，给我结果[1]（对于什么是有效的.next()匹配），或[0]为第一场比赛（如果列表中只有一个结果，请.last()同时提供第一个和最后）。

尽管选择器的排序与使用.last()看起来相反，但这似乎与.first()不同，我不一定理解为什么会这样。这是whichever order the selectors are in，所以我按照他们在选择中理解的方式命令它们。

然后，其余的很简单。将一个类添加到选择器返回.last()的任何一个，然后找到.siblings()到那个（新的）选定的.section .selected（唯一的另一个将是我们'重新选择，并删除它的.selected类。

似乎有效。我想我想听听关于这是否可靠的任何意见。

Answer 3

我做了一个像这样的简单代码

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

Answer 4

的CoffeeScript

我认为我会为那些使用它的人分享我简单的CoffeeScript解决方案：

$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')

注意：如果您不希望包含在循环/循环中的兄弟姐妹，请确保将相应的selector传递给next()和siblings() 的

我怎么循环.next（）？

4 个答案:

的CoffeeScript