Javascript 用于循环以显示下一项

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

.hl{背景：绿色；}
一些
一些
一些
一些
一些
一些
一些
点击我
$（文档）.ready（函数（）{
变量项=$（'ol'）。查找（'li'）；
变量btn=$（“按钮”）；
点击（功能（e）{
e、 预防默认值（）；
对于（变量i=0；i

喜欢

---

演示：

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

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

演示：

$（文档）.ready（函数（）{
var-idx=0；
$（“按钮”）。单击（函数（）{
if（idx<$（'li'）.length）$（'li'）.removeClass（）.eq（idx）.addClass（'hl'）；
idx++；
});
});

---

您可以使用单击事件来查找下一个

li

并移动类名，检查是否存在下一个li，以便不在最后一个li之后继续

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

---

不要对使用

，而是每次单击时增加一个计数器：

$(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
元素，则必须重新创建
项
变量，并重置
i
计数器。
当前，您正在查找中的所有lis并在其上循环

看来你想要的是

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

查看下面的fiddle示例，它显示了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;
            }
        }
    });

您的代码告诉它遍历所有列表项。你能澄清一下当点击按钮时你想发生什么吗？你应该在控制台中每次点击只得到一个数字。如果要获取
li
，请执行
console.log（项[i]）呸，这个模的东西是dope；）这不会在所有项目中循环。当第二个有类时，第一个、第三个、第四个……将由过滤器#1选择，然后第二个再次从中选择第一个LI。我对这个问题的理解是，作者希望每个项目都得到类，但每次单击仅一个。并不是说每次点击都应该将其从之前的按钮中删除。嗯，好吧，可能是这样的——我解释为“当再次点击按钮时，它会跳到第二个li”，但情况有所不同。
var $item = $('ol').find('li').filter(':not(.myClass)').filter(':first');
$item.addClass("myClass");

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