16

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

目前它从 1 --> 2 --> 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/

4

4 回答 4

27

最简单的方法就是检查是否.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/

于 2013-03-26T02:50:38.393 回答
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()将给出第一个和最后一个）。

尽管选择器的顺序看似与 using 相反.last()，但这似乎可以代替.first()，为此我不一定理解为什么会这样。这是选择器的顺序，所以我按照它们在选择中有意义的方式对它们进行了排序。

然后，剩下的就很简单了。将一个类添加到选择器返回的任何一个.last()，然后找到.siblings()（新）选择的那个（.section唯一.selected的另一个是我们要从中选择的那个）并删除它的.selected类。

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

于 2013-03-26T04:19:36.063 回答
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');}
});
于 2013-03-26T04:34:52.947 回答
0

咖啡脚本

我想我会为那些使用它的人分享我简单的 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()是否有您不想包含在循环/循环中的兄弟姐妹。

于 2015-07-08T03:35:34.163 回答