使用jQuery遍歷div（s）

我在我的html頁面中添加了幾個div。接下來，我在jQuery中添加了一些按鈕和相關的點擊功能。根據按下的按鈕，div元素的背景色會發生變化。問題發生在終端。在到達第一個（或最後一個）之後，我想循環下一個元素。以下是我嘗試過的。看來我的代碼的if()部分存在問題。請在這裏指出可能的錯誤。 jsFiddle link 使用jQuery遍歷div（s）

我不明白，如果我可以分配爲：

$curr = $("div").first();

那麼爲什麼我不能作爲比較：

if($curr === $("div").first())

HTML：

<div></div> 
<div></div> 
<div><span>has child</span></div> 
<div></div> 
<div></div> 
<div></div> 
<div id="start"></div> 
<div></div> 

<p>Go to First <input type="button" id="first" value="First" /></p> 
<p>Go to Next <input type="button" id="next" value="Next"/></p> 
<p>Go to Prev <input type="button" id="prev" value="Prev" /></p> 
<p>Go to Last <input type="button" id="last" value="Last" /></p>

CSS：

div { 
    width: 40px; 
    height: 40px; 
    margin: 10px; 
    float: left; 
    border: 2px blue solid; 
    padding: 2px; 
    } 
    span { 
    font-size: 14px; 
    } 
    p { 
    clear: left; 
    margin: 10px; 
    }

JS：

var $curr = $("#start"); 
$curr.css("background", "#f99"); 

$("#first").click(function() { 
     $curr = $("div").first(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
}); 

$("#prev").click(function() { 
    if($curr === $("div").first()){ 
     alert("cycling through..."); 
     $curr = $("div").last(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
    }else{ 
     $curr = $curr.prev(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
    } 
}); 

$("#next").click(function() { 
    if($curr === $("div").last()) { 
     alert("cycling through..."); 
     $curr = $("div").first(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
    }else { 
     $curr = $curr.next(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
    } 
}); 

$("#last").click(function() { 
     $curr = $("div").last(); 
     $("div").css("background", ""); 
     $curr.css("background", "#f99"); 
});

UPDATE 01：到達最後元件按壓Next按鈕顏色的按鈕太后同樣。我想要第一個div被着色而不是按鈕。爲什麼按鈕變得有顏色？他們不在任何div內。

來源

2014-10-31 KNU

試試這個：你可以使用CSS類來添加/刪除背景類，因爲這將很容易識別當前元素。由於is(':last')或3210不能正常工作，因爲沒有全部包裝元素div，它們直接位於body之內。因此您可以使用元素的索引來查找它是最後還是第一個。

CSS

.color{background-color: #f99;}

jQuery的

var $curr = $("#start"); 
$curr.addClass("color"); 
var total = $curr.siblings("div").length; 

$("#first").click(function() { 
     $curr = $("div").first(); 
     $("div.color").removeClass("color"); 
     $curr.addClass("color"); 
}); 

$("#prev").click(function() { 

    if($curr.index()==0) { 
     $curr = $('div').last(); 
    } 
    else 
    { 
     $curr = $curr.prev(); 
    } 
    $("div.color").removeClass("color"); 
    $curr.addClass("color"); 
}); 

$("#next").click(function() { 
    if($curr.index()==total) { 
     $curr = $('div').first(); 
    } 
    else 
    { 
     $curr = $curr.next(); 
    } 
    $("div.color").removeClass("color"); 
    $curr.addClass("color"); 
}); 

$("#last").click(function() { 
     $curr = $("div").last(); 
     $("div.color").removeClass("color"); 
     $curr.addClass("color"); 
});

DEMO

來源

2014-10-31 11:04:24