.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 (). Как мне настроить каждый, где он будет перебирать одну подпись за раз вместо того, чтобы получать только последнюю?

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

Answer 2

вы устанавливаете Заголовок 3 раза за <li>, последний раз (и тот, который остается) - когда он установлен на «Заголовок 3»

Answer 3

Попробуйте

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

Answer 4

Нет, это не просто получение последнего текста, это получение каждого текста, но так как вы устанавливаете заголовок на всех изображениях каждый раз, когда вы перезаписываете предыдущее значение, и все изображения заканчиваются последним текстом.

Метод each обеспечивает метод обратного вызова индексом, так что вы можете использовать его, чтобы получить правильный текст для каждого изображения:

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