For 循环显示下一项答案

【问题标题】：For loop to show next itemFor 循环显示下一项
【发布时间】：2014-02-02 00:31:02
【问题描述】：

我有一个 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>

【问题讨论】：

您的代码告诉它遍历所有列表项。你能澄清一下当按钮被点击时你想要发生什么吗？
您应该只在控制台中每次点击获得一个数字。如果您想获得li，请执行console.log(item[i]);

标签： javascript jquery

【解决方案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/

【讨论】：

呸，这个模的东西太棒了；）

【解决方案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

【讨论】：

【解决方案3】：

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

jsFiddle example

【讨论】：

【解决方案4】：

你可以使用点击事件找到下一个li并移动类名，检查是否有下一个li，这样你就不会在最后一个之后继续。

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

Fiddle

【讨论】：

【解决方案5】：

目前您正在查找所有的 lis 并在它们上循环。

看来你想要的是

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

【讨论】：

这不会遍历所有项目。当第二个有班级时，第一个、第三个、第四个……将由过滤器#1 选择 - 然后第二个再次从这些中选择第一个 LI。
我对这个问题的理解是，作者希望每个项目都能得到类，但每次点击只有一个。并不是说每次点击都应该从之前的版本中删除它。
嗯，好吧，可能是——我解释了“当再次单击按钮时，它跳转到第二个li”。

【解决方案6】：

不要使用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 计数器。

【讨论】：

【解决方案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

【讨论】：