javascript - 使用 jQuery 循环遍历元素的最简洁方法？

Question

给定下面的 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');
});

Answer 1

可能比简洁更像高尔夫，但仍然

var elems = $('li').on('click', function(e) {
    if ( $(e.target).is('.next') ) 
        $([this.nextElementSibling||elems.first(), this]).toggleClass('active hidden');
});

FIDDLE

或

$('.next').on('click', function(e) {
    $('.active+li, li:first').last().add('.active').toggleClass('active hidden');
});

FIDDLE

为了一致性和可读性，我会这样做

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

FIDDLE