Using jQuery .each() to append title attribute below multiple images.

Question

How can I use .each() to get a var, use it, clear it and then start fresh with the next loop of .each()?

I've got a varying number of images with 'title' attribute. I want to take the title attribute and append it to a new div after each image, creating a caption. Using the following code on a page with 2 images, however, I get both of their titles under each image.

How can I run .each() so that it does it's work on the first image, erases it's var, then does it's work on the second image?

jQuery(".node-type-article .imagefield-imagelink img").each( function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption"></div>');
    jQuery('.caption').append(caption);
    caption = '';
});

Here is what worked: jQuery('.node-type-article .imagefield-imagelink img').each(function() { jQuery(this).after( jQuery('
') .text( jQuery(this).attr('title')) ); }); — mtro, Jul 29 '11 at 13:28
I'm liking JQuery although a lot going on, on one line it feels very elegant — Paul C, Jul 29 '11 at 13:36

score 4 · Answer 1 · answered Jul 29 '11 at 13:24

This is the offending line. It's matching both divs:

jQuery('.caption').append(caption);

Do this:

jQuery(".node-type-article .imagefield-imagelink img").each(function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption">' + caption + '</div>');
});

Also, you don't need to clear the caption var. It's local to each invocation of the function.

score 0 · Answer 2 · answered Jul 29 '11 at 13:17

0

Every iteration will start a fresh scope. You don't need to erase the var caption as it'll automatically go out of scope after the iteration.

answered Jul 29 '11 at 13:17

Mrchief

75,126
20
142
189

score 0 · Answer 3 · answered Jul 29 '11 at 13:18

Your problem is here:

caption = '';

This will work:

jQuery(".node-type-article .imagefield-imagelink img").each( function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption"></div>');
    jQuery('.caption').append(caption);
    this.title = ''; //or the jQuery way --> $(this).attr('title','');
});

Luke Duddridge · Answer 4 · 2011-07-29T13:31:32.680

Your culprit is: jQuery('.caption').append(caption);

this will find all objects with the class of caption and append the caption text to it.

What you area probably seeing is one caption with one title and then one with 2.

The fix is to add a next statement, so instead of:

jQuery('.caption').append(caption);

you do:

$(this).next('.caption').html(caption);
// $ and jQuery are the same thing btw

EDIT

Sorry forgot to add, you dont need to clear you caption variable.

Because you have defined your variable within the each function, it will create a new variable each time.

Using jQuery .each() to append title attribute below multiple images.

4 Answers4