nth-child selector in jQuery
This fiddle goes along with this blog post: http://ryan.sadwick.com/nth-child/
by 2jddfsjad
HTML
<div id="group">
<div class="item">
first
</div>
<div class="item"> second
</div>
<div class="item">
third
</div>
<div class="item">
fourth
</div>
<div class="item">
fifth
</div>
<div class="item">
sixth
</div>
<div class="item">
seventh
</div>
</div>
CSS
#group{ display: inline-block; width: 245px;}
.item{ display: inline-block; margin-top: 12px; padding: 12px;}
JavaScript
window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#FFFFFF");
}, 1000);
window.setInterval(function(){
$(".item:nth-child(2)").css("color", "#FFFFFF");
}, 2000);
window.setInterval(function(){
$(".item:nth-child(3)").css("color", "#FFFFFF");
}, 3000);
window.setInterval(function(){
$(".item:nth-child(4)").css("color", "#FFFFFF");
}, 4000);
window.setInterval(function(){
$(".item:nth-child(5)").css("color", "#FFFFFF");
}, 5000);
window.setInterval(function(){
$(".item:nth-child(6)").css("color", "#FFFFFF");
}, 6000);
window.setInterval(function(){
$(".item:nth-child(7)").css("color", "#FFFFFF");
}, 7000);