using jquery's each() to add click events to imgs

Question

I'm using jquery's each() to add click events to a set of imgs , this works fine but i want each img to have a different effect on click it .

$('#worksfoot img').each( function() {

    $(this).click( function() {



        $('#entrycontainer').animate({
        marginLeft:  

        },500); })



})

I would like for the first img to set marginLeft as 0 , then increment it 100 for each of the others .

Answer 1

You could try the following solution:

$('#worksfoot img').each( function(index) {
    $(this).click( function() {
        $('#entrycontainer').animate({
            marginLeft: 100*index
        },500);
    });
});

Answer 2

('#worksfoot img').each( function(index, elem) {
    elem.click( function() {
        $('#entrycontainer').animate({
        marginLeft:  100*index
        },500); })
})

Answer 3

You shouldn't use multiple id's for different elements. To make it work fine and always try using class instead of id.