向Jquery一次添加一個類的一個類

Question

我在一個ul和一個按鈕中有5個li。點擊按鈕，我想添加一個類到第一個li，然後在第二個點擊從第一個li刪除這個類，並添加它也是第二個ect。我知道我可以給每個人一個個人身份證，但我知道必須有更好的方式，我可能希望它在某些時候也是動態的。

在此先感謝。

Answer 1

這裏是一個有效的解決方案：http://jsfiddle.net/PFpaU/

搭配點評：http://jsfiddle.net/PFpaU/1/

JS：

window.change = function() { 
    // Select any li which already has the class 
    var li = $("li.myclass"); 
    // If there were any matches... 
    if (li.length) 
     // Remove the class from the matched li and then move to the 
     // next item in the DOM tree, then add the class to that item 
     li.removeClass("myclass").next().addClass("myclass"); 
    else 
     // If none of the li's had the class, add it to the first one 
     $("li").first().addClass("myclass"); 
} 

HTML：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
<button onclick="change()">Change</button> 

CSS：

.myclass { 
    color: #f00; 
} 

Answer 2

你可以這樣做，

$('#yourButton').click(function(){ 
    var ul=$('#yourUlId'); 
    var next= $('li:not(.yourClass)',ul).first(); 
    next.addClass('yourClass'); 
    next.prev().removeClass('yourClass'); 
}); 

Answer 3

你要細化選擇比li更具體的東西，但是這應該做的伎倆（放置在您單擊處理程序）。

var withClass = $('li .your-class'); 

if (!withClass.length) { 
    // If nothing has the class, add to the first list element 
    $('li').addClass('your-class'); 
} else { 
    // Otherwise remove the class and add to the next item 
    withClass.removeClass('your-class').next().addClass('your-class'); 
} 

Answer 4

使用以下代碼。首先，您要選擇根元素<ul>（萬一存在多個元素）。然後，搜索一個包含您的課程名稱的列表元素，例如className。如果存在（li.length），請從當前列表中刪除該類，並將其添加到下一個。否則，將該類添加到<ul>的第一個列表元素。

$("#buttonID").click(function(){ 
    var ul = $("ul"); //Root <ul>, change it to the desired UL, eg #myUL 
    var li = $("li.className", ul); 
    if(li.length){ 
     li.removeClass("className").next().addClass("className"); 
    } else { 
     $("li", ul).addClass("className"); 
    } 
})