Question

作为jQuery noob我有一个问题，我不知道如何解决它:( 我有ul标签和里面的li标签。我正在尝试完成此：在首先点击按钮选择第一个 li标签，在第二个上单击选择第二个 li标签等等...... 您可以看到这没有按预期工作（它选择第一个和第二个标记）。有人可以帮助我或指出我正确的方向吗？这是jsFiddle链接：http：//jsfiddle.net/aH8w2/谢谢!!!

<script type="text/javascript">
function addCss(){


$('ul li.first').addClass('red');

}

$(document).ready(function(){
$("button").click(function(){    
addCss();
});

$("button").click(function(){    
if($('ul li.first').is('.red'))
$('ul li.first').next('li').addClass('red'); 
});

});

</script>

Answer 1

试试这个：

$("button").click(function(){    

  $('.red').removeClass('red').next('li').addClass('red');

});

Answer 2

另一种方式，在到达目的地时再次跳转到列表的开头：

var $lis = $('ul > li');

$("button").click(function(){   
    var $selected =  $('.red').removeClass('red');
    ($selected.next().length > 0 ? $selected.next() : $lis.first()).addClass('red');
});

或者更短一些：

($selected.next().get(0) || $lis[0]).className += 'red';

DEMO

Answer 3

<强> DEMO

$("button").click(function(){    
    if($('.red').length > 0) {
        $('.red').removeClass('red').next().addClass('red'); 
    } else {
        $('li:first').addClass('red');   
    }
});

您的第一个.first也不需要li。 jQuery可以li:first选择第一个匹配的项目。

Answer 4

试试这个：

$("button").click(function(){   
var current = $('ul li.red'); 
current.first().next('li').addClass('red'); 
current.removeClass('red');
});

这假设您至少有一个li为“红色”。

Answer 5

试试这个：

$(document).ready(function(){
    $("button").click(function(){    
        if($('.red').length == 0 || $('.red').next().length == 0){
           $('.red').removeClass('red');
           $('.first').addClass('red');
        }else{
            $('.red').removeClass('red').next().addClass('red');
        }
    });

});

这将处理第一次点击以及所有后续点击。如果你到达终点，甚至会回到第一个。

每次点击都会选择下一个li标签

5 个答案: