.each() with for loop? need to iterate to add captions

Question

I have an issue with each loop and I'm trying to learn. I have a for loop and it iterates through a set number, then what I want to do is set a caption through each images I have set up.

Jquery Code:

for(i=0; i<numImages; i++) {

    var previewCaptions = $('span#tooltips'+(i+1)).text();
    $("ul.selector").find('li').each(function(){
           $(this).attr('title',previewCaptions);
    });
}

HTML Code:

<span id="tooltips1" class="tip">Caption 1</span>
<span id="tooltips2" class="tip">Caption 2</span>
<span id="tooltips3" class="tip">Caption 3</span>

<ul>
<li><img src="src1" /></li>
<li><img src="src2" /></li>
<li><img src="src3" /></li>
</ul>

My problem is that it is only getting the last span text from the each(). How do I set up the each where it will iterate through one caption at a time instead of only getting the last one?

Answer 1

Since the captions and images are a 1:1, I would do the following:

$("img").each(function(index){
  $(this).attr("title", $("span.tip").eq(index).text() );
});

This will cycle through each image (should make this selector more specific). With each cycle, the index (first image has index of 1, second has index of 2, etc) of the image is taken and the appropriate span (first image, first span; second image, second span, etc) is found, resulting in its text being added to the title attribute of the image.

You could even simplify it further:

$("img").attr("title", function(index){
  return $("span.tip").eq(index).text();
});

This results in the following:

<ul>
  <li><img src="src1" title="Caption 1"></li>
  <li><img src="src2" title="Caption 2"></li>
  <li><img src="src3" title="Caption 3"></li>
</ul>

Online Demo: http://jsbin.com/odeciv/edit : http://jsbin.com/odeciv/2/edit

Answer 2

you are setting the Title 3 times per <li>, the last time (and the one that stays) is when it is being set to 'Caption 3'

Answer 3

No, it's not just getting the last text, it's getting each text, but as you are setting the title on all images each time you will overwrite the previous value, and all images end up with the last text.

The each method provides the callback method with the index, so you can use that to get the right text for each image:

$("ul").find('li').each(function(i){
  $(this).attr('title', $('#tooltips'+(i+1)).text());
});

Answer 4

Try

$("li").each(function(index){
    var previewCaptions = $('#tooltips'+(index+1)).text();
       $(this).attr('title',previewCaptions);
});