Appending paragraphs to an image attribute in order? (1st to 1st, 2nd to 2nd … nth to nth) JQUERY

Question

I have made a division of paragraphs with information in each. I also have a division of images.

My goal is to use jquery to append the text in each paragraph to an attribute in each image called 'data-description'.

So the first paragraph put in the 'data-description' attribute for the first image, and the second paragraph put in the 'data-description' attribute for the second image, etc...

For instance this code will do it just for the first:

$('#galleria :first-child').attr('data-description', $('#descriptions :first-child').text());

..given that the #galleria div contains the images, and the #descriptions div contains the text.

I've attempted to use a variable which increases each time, or classes which apply to each in sequence, or arrays, but I've had no joy.

I hope this explanation makes some sense!

I'd appreciate any thoughts, thanks.

Answer 1

Try this:

$('#galleria img').each(function(i){
    $(this).attr('data-description', $('#descriptions p:eq('+i+')').text());
});

Explanation:

I use $('#galleria img').each to execute a function for each image tag. The variable named 'i' is equal to the current element index in the list. Then, I retrieve the "i"-th p tag into #descriptions and I put it in the data-description tag of the current image.

I hope it makes sense.

Answer 2

Try this

$('#galleria img').each(function(k,v){
    $(this).prop('data-description', $('#descriptions p').eq(k)').html());
    i = i + 1;
});