jquery - .each() 与 for 循环？需要迭代添加字幕

Question

我对每个循环都有一个问题，我正在努力学习。我有一个 for 循环，它遍历一组数字，然后我想要做的是通过我设置的每个图像设置标题。

Jquery 代码:

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

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

HTML 代码:

<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>

我的问题是它只从each() 获取最后一个跨度文本。如何设置 each 一次迭代一个标题而不是只获取最后一个标题？

Answer 1

由于标题和图像是 1:1，我会执行以下操作:

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

这将循环浏览每个图像(应该使该选择器更加具体)。在每个周期中，获取图像的索引(第一张图像的索引为 1，第二张图像的索引为 2 等)，并找到适当的跨度(第一张图像、第一跨度；第二张图像、第二跨度等)，从而得到将其文本添加到图像的标题属性中。

您甚至可以进一步简化它:

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

这会产生以下结果:

<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>

在线演示:http://jsbin.com/odeciv/edit : http://jsbin.com/odeciv/2/edit