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

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

这是我之前发布的更好更短的代码版本。我单独发布它是因为它使用了不同的选择方法，并导致代码显着缩短。我认为它保证了它自己的答案，因为它更简洁，它使用CSS选择器而不是jQuery函数，我认为这里没有讨论过这种方法。

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

JSFiddle

Answer 7

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

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

（jsfiddle demo）

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

7 个答案: