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>

我的问题是它只从每个（）获取最后一个跨度文本。如何设置每次迭代一个标题而不是仅获取最后一个标题的位置？

Answer 1

由于字幕和图片是1：1，我会执行以下操作：

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

这会循环显示每个图像（应该使这个选择器更具体）。对于每个循环，获取图像的索引（第一图像具有索引1，第二图像具有索引2等）并且找到适当的跨度（第一图像，第一跨度;第二图像，第二跨度等），得到在其文本中添加到图像的title属性。

你甚至可以进一步简化它：

$("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

Answer 2

你每个<li>设置标题3次，最后一次（和保留的标题）是设置为'标题3'的标题

Answer 3

不，这不只是获取最后一个文本，而是获取每个文本，但是当您在每次覆盖前一个值时在所有图像上设置标题，并且所有图像都以最后一个文本结束。

each方法为索引提供回调方法，因此您可以使用它来获取每个图像的正确文本：

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

Answer 4

尝试

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

.each（）与for循环？需要迭代才能添加标题

4 个答案: