我有3个相同的类div,我添加类'选择'到下一个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 Fiddle链接:http://jsfiddle.net/madhuri2987/KK66g/2/
4条答案
按热度按时间0vvn1miw1#
最简单的方法是检查
.next()
是否存在,如果不存在,则“选择”第一个。http://jsfiddle.net/KK66g/3/
s6fujrry2#
我不确定我是否应该声称这在每种情况下都有效,但我一直想知道是否有可能进展到第一次对最后一次无效。这是我计算出来的
http://jsfiddle.net/userdude/9UFD2/
首先选择
.selected
之后的.section
:我还添加了一个辅助选择器,以确保至少获得一个匹配:
在这个相对简单的例子中,上面表示第一个
$('.section')[0]
。然后我在复合选择的结果上使用.last()
,得到结果[1]
(对于有效的.next()
匹配),或者[0]
(对于第一个匹配)(参见,如果列表中只有一个结果,.last()
将给予 first 和 last)。虽然选择器的顺序似乎与使用
.last()
相反,但这似乎可以代替.first()
,我不一定理解为什么会这样。这是whichever order the selectors are in,所以我按照它们在选择中的意义来排序。然后,剩下的就简单了。添加一个类到选择器返回的
.last()
,然后找到.siblings()
到(新)选择的.section
和.selected
(唯一的另一个将是我们选择的那个),并删除它的.selected
类。似乎起作用了。我想我想听听关于这是否可靠的任何评论。
cngwdvgl3#
我做了一个像这样的简单代码
lokaqttq4#
CoffeeScript
我的简单CoffeeScript解决方案,我想我会分享给那些使用它:
selector
传递给next()
和siblings()
。*