jQuery variable iteration with .each()

Question

My code needs to capture the 'src' of an image in a variable. It then needs to insert this variable into a 'href' tag on a link which surrounds the image.

$('.fancybox-image-li img').each(function(test) {
    var test = $(this).attr("src");
    $('.fancybox-image-link').attr('href', ''+test+'');
});

Unfortunately what seems to be happening is the 'test' var is only getting the attribute of the last img and then inserting this into all the 'href' attributes.

Any ideas how I can get the variable to change per image.

Nicola Peluchetti · Accepted Answer · 2012-10-03 15:37:12Z

1

Maybe you should do

$('.fancybox-image-li img').each(function(test) {

    var test = $(this).attr("src");
    // find the closest element with the class
    $( this ).closest('.fancybox-image-link').attr('href', ''+test+'');

});

Otherwise in each iteration you set the href of all $('.fancybox-image-link') to the current href attribute, thus getting alle the $('.fancybox-image-link') with the last href

answered Oct 3, 2012 at 15:37

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marius Ilie · Accepted Answer · 2012-10-03 15:37:41Z

0

your link selector is not ok. This $('.fancybox-image-link') will select all links with that class so all of them will have the same href attribute.

You need a more specific selector for the link. Maybe try and use the parent element, if both the image and the link are contained in the same element.

answered Oct 3, 2012 at 15:37

Marius Ilie

3,3232 gold badges27 silver badges27 bronze badges

Comments

Michael Laffargue · Accepted Answer · 2012-10-03 15:38:27Z

0

You should be more specific with $('.fancybox-image-link') using selection method like child ... to $(this).

answered Oct 3, 2012 at 15:38

Michael Laffargue

10.3k6 gold badges46 silver badges76 bronze badges

Comments

Blender · Accepted Answer · 2012-10-03 15:38:47Z

0

$('.fancybox-image-link') returns all of the elements with that class. You're essentially modifying all of them each loop iteration.

Instead, use .index() to select individual ones:

$('.fancybox-image-li img').each(function(index, value) {
    $('.fancybox-image-link').index(index).attr('href', $(this).attr("src"));
});

answered Oct 3, 2012 at 15:38

Blender

300k55 gold badges462 silver badges512 bronze badges

Collectives™ on Stack Overflow

jQuery variable iteration with .each()

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related