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

小提琴

要么

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

小提琴

Answer 2

$('.next').click(function() {
  var $li = $(this).parent().toggleClass('active hidden'),
     $nextLi = $li.is(':last-child') ? $li.siblings(':first') : $li.next();

  $nextLi.toggleClass('active hidden');
});

简而言之，您可以使用toggleClass在active和hidden以及伪选择器:first和:last-child之间进行切换，以确定是否应循环回到第一个元素。

Answer 3

添加位置属性

<ul>
  <li class="active" position="0">        
    First Element <a href="#" class="next">NEXT</a>
  </li>
  <li class="hidden" position="1">        
    Second Element <a href="#" class="next">NEXT</a>
  </li>
  <li class="hidden" position="2">        
    Third Element <a href="#" class="next">NEXT</a>
  </li>
</ul>

var max = 3;
$('.next').click(function() {
    var position = $('.active').removeClass('active').addClass('hidden').attr('position');
    var nextPosition = Number(position) + 1 % max;
    $('li.hidden[position="' + nextPosition + '"]').addClass('active');
});

Answer 4

我的2美分价值：

   $('.next').click(function(){
        var $parent=$(this).parent().toggleClass('active hidden'),
            $next = $parent.next().length ? $parent.next() : $parent.siblings(':first');
        $next.toggleClass('active hidden');            
    });

DEMO

Answer 5

为什么要切换课程？ 只需设置css，以便仅显示第一项，然后在单击该项时将其移到列表的末尾。

$('ul').on('click', '.next', function() {
    var $li = $(this).closest('li');
    $li.parent().append($li);
});

CSS

ul>li { display: none; }
ul>li:first-child { display: block; }

的jsfiddle

---

但是，如果您必须切换类：

$('ul').on('click', '.next', function() {
    $(this).closest('ul').children(':first,.active,.active+*').slice(-2).toggleClass('active hidden');
});

的jsfiddle

Answer 6

$('.next').click(function() {
    var dir = $('.active').next().length ? 'next' : 'siblings';
    $('.active').toggleClass("active hidden")[dir]().first().toggleClass("active hidden");
});

DEMO

Answer 7

这是我先前发布的代码的更好和更短的版本。 我将其分开发布是因为它使用了不同的选择方法，并导致代码明显缩短。 我认为它有其自己的答案，因为它既简洁又使用CSS选择器而不是jQuery函数，我认为此处尚未讨论该方法。

$('.next').click(function() {
    $('.active, '+($('.active+li').length?'.active+li':'li:first')).toggleClass("active hidden");
});

的jsfiddle

Answer 8

嗯，它不是很多jQuery，但是非常简洁，并传达了很好的含义：

$('ul').on('click', 'li > .next', function(e) {
    var li = this.parentNode;
    li.className = "hidden";
    (li.nextElementSibling || li.parentNode.firstElementChild).className = "active";
});

（ jsfiddle演示 ）