Question

我有一个包含订单列表和下面一个按钮的div。现在我想要发生的是，当单击按钮时，您将向第一个li添加一个类，当再次单击该按钮时，它会跳转到第二个li，依此类推，直到它到达最后一个li，然后停止。这是我的代码。

目前我正在使用console.log，看看会发生什么，但每次点击它都会显示所有列表项。

<style>
  .hl { background: green; }
</style>

<div class="large-2 large-centered columns">
    <ol>
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
    </ol>
    <button>Click Me</button>
</div>

<script>
  $(document).ready(function(){
    var item = $('ol').find('li');
    var btn = $('button');

    btn.click(function(e){
      e.preventDefault();
      for (var i = 0; i < item.length; i++) {
         console.log([i]);
      };
    });
  });
</script>

Answer 1

尝试像这样循环你的项目：

$(document).ready(function () {

    var item = $('ol').find('li');
    var btn = $('button'),
        i = 0;

    btn.click(function(e) {
        e.preventDefault();
        item.removeClass('hl').eq(i++ % item.length).addClass('hl');
    });
});

演示：http://jsfiddle.net/yV9CM/

Answer 2

像

$(document).ready(function () {
    var $items = $('ol').find('li');
    var $btn = $('button');

    $btn.click(function (e) {
        e.preventDefault();
        var $current = $items.filter('.hl').removeClass('hl'),
            $next = $current.next();
        if (!$next.length) {
            $next = $items.first();
        }
        $next.addClass('hl')
    });
});

演示：Fiddle

Answer 3

$(document).ready(function () {
    var idx = 0;
    $('button').click(function () {
        if (idx < $('li').length) $('li').removeClass().eq(idx).addClass('hl');
        idx++;
    });
});

<强> jsFiddle example

Answer 4

您可以使用click事件查找下一个li并移动类名，检查是否存在下一个li，以便在最后一个之后不继续。

$(function(){
    $('button').click(function(e){
      var nextLi = $('li.active').next();
        if( nextLi.length == 1 ){ 
          $('li.active').removeClass('active').next().addClass('active');
        }
    });
});

Fiddle

Answer 5

请勿使用for，而是在每次点击时递增计数器：

$(document).ready(function(){
    var item = $('ol').find('li');
    var btn = $('button');
    var i = 0;

    btn.click(function(e){
      e.preventDefault();
      console.log(item[i]);
      i++;
      if (i === item.length) {  //you start from the beginning if you reach end
         i = 0;
      }  
    });
});

请注意，如果您在网页加载后更改li元素，则必须重新创建item变量，并重置i计数器。

Answer 6

目前，您正在寻找所有的lis并在其中循环。

看起来你想要的是

var $item = $('ol').find('li').filter(':not(.myClass)').filter(':first');
$item.addClass("myClass");

Answer 7

查看以下小提琴示例，其中显示jquery用于此目的。

    $('ol').find('li').each(function (index) {
        if ($(this).attr('class') != undefined) {
            if (($(this).attr('class')).indexOf('selected') >= 0) {
                if ($length > index + 1) {
                    $(this).removeClass('selected').next().addClass('selected');
                }
                return false;
            }
        }
    });

Fiddle

用于循环显示下一个项目

7 个答案: