给定下面的 HTML,在按下一个按钮时切换类 active
和 hidden
的同时遍历所有元素的最简洁的方法是什么?
<ul>
<li class="active">
First Element <a href="#" class="next">NEXT</a>
</li>
<li class="hidden">
Second Element <a href="#" class="next">NEXT</a>
</li>
<li class="hidden">
Third Element <a href="#" class="next">NEXT</a>
</li>
</ul>
您可以假设 hidden
类隐藏了元素。
这是我能想到的最简洁的方式:
$('.next').click(function() {
var $li = $(this).parent().toggleClass('active hidden'),
$nextLi = $li.is(':last-child') ? $li.siblings(':first') : $li.next();
$nextLi.toggleClass('active hidden');
});
最佳答案
可能比简洁更像高尔夫,但仍然
var elems = $('li').on('click', function(e) {
if ( $(e.target).is('.next') )
$([this.nextElementSibling||elems.first(), this]).toggleClass('active hidden');
});
或
$('.next').on('click', function(e) {
$('.active+li, li:first').last().add('.active').toggleClass('active hidden');
});
为了一致性和可读性,我会这样做
$('.next').on('click', function(e) {
var li = $(this).closest('li'), // this LI
lis = li.siblings().addBack(), // all LI's
act = lis.filter('.active'), // active LI
next = act.next(); // next LI
if ( next.length === 0 ) next = lis.first(); // if no next, get first
li.add( next ).toggleClass('active hidden');
});
关于javascript - 使用 jQuery 循环遍历元素的最简洁方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29956818/