使用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演示 ）