CODEWITHSUNDEEP
javascriptjqueryclasssliderjquery-selectors
Howdy_McGee
Howdy_McGee

Reputation: 10643

Looping Through Images using JQuery

I am trying to use 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.

Upvotes: 1

Views: 1324

Answers (4)

musicinmyhead
musicinmyhead

Reputation: 1476

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');

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185933

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');
}

Upvotes: 2

dstarh
dstarh

Reputation: 5076

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');
});    });

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

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

Upvotes: 1

Related Questions