Прохождение через div (s) с помощью jQuery

Я добавил несколько div в тело моей страницы html. Затем я добавил некоторые кнопки и связанные функции щелчка в jQuery. В зависимости от нажатой кнопки изменяется фоновый цвет элемента div. Проблема возникает на терминалах. После того, как он достиг первого (или последнего), я хочу пройти через следующий элемент. Ниже я попытался. Кажется, что есть проблема в моей части кода if(). Пожалуйста, укажите, что может быть неправильно. jsFiddle link Прохождение через div (s) с помощью jQuery

Я не понимаю, если я могу назначить, как:

$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: Кроме того, после достижения последнего элемента нажатием кнопки Далее открывается цветам кнопок тоже. Вместо этого я хочу, чтобы первый div был окрашен, а не кнопки. Почему кнопки окрашиваются? Они не находятся внутри какого-либо div.

источник

2014-10-31 KNU

Попробуйте следующее: вы можете использовать класс CSS для добавления/удаления класса фона, так как это будет легко идентифицировать текущий элемент. Поскольку is(':last') или is(':first') не работает, потому что нет оберточного элемента для всех 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