Looping Through Images using JQuery

I am trying to u开发者_运维技巧se JQuery next() to add CSS to one image at a time highlighting it. When the user clicks a button it should highlight the next() image with a border. Instead though it is highlighting all of the images after it.

$('#imageList img').next().addClass('selected');

It adds the class to ALL the images though.

this will get you what you want too http://jsfiddle.net/GWtg8/2/

$(document).ready(function(){
$('#btn').click(function(){
    $('#cont img').not('.selected').first().addClass('selected');
});    });

First, select the first image:

var img = $('#imageList img:first').addClass('selected');

Now, whenever you want to hightlight the next image, call this function:

function selectNext() {
    img.removeClass('selected').next().addClass('selected');
}

Try this

$(function(){
    var imageList = $('#imageList img'), imgCounter = 0;
    $("buttonSelector").click(function(){
       imageList.eq(imgCounter++).addClass('selected');
    }); 
});

Seems like the following should work pretty well for you, should add the "selected" class to the first image in the set not containing that class:

$('#imageList img:not(.selected)').eq(0).addClass('selected');