Как добавить правильный атрибут в ряд элементов?

Question

У меня есть этот бит кода:

if ($('.page-template-default .gallery img').attr('alt') !== undefined) {
   $('.page-template-default .gallery li').append("<small>" + $('.page .gallery img').attr('alt') + "</small>");
}

В основном это добавляет альтернативный текст изображения рядом с самим изображением.

Проблема в том, что у меня есть страница с 10 изображениями, и добавленный альтернативный текст всегда один и тот же, взятый из первого изображения.

Есть ли способ вернуть каждый альтернативный текст на соответствующее изображение?

Answer 1

Кажется, самый простой способ:

$('.page-template-default .gallery img').attr('alt', function (i, alt) {
    if (typeof alt != 'undefined' && alt!='') {
        $(this).closest('li').append(alt);
    }
});

jsFiddle Demo

Для небольшого объяснения:

1. .attr() можно использовать с функцией в качестве второго параметра. Обычно он используется для установки атрибута (на этот раз alt) с использованием возвращаемого значения функции. В этом случае я ничего не возвращаю, просто использую его для просмотра атрибутов alt указанных изображений.

2. this здесь будет ссылаться на img, который используется в настоящее время

3. .closest() вернет ближайшего родителя изображения, соответствующего селектору 'li'.

Answer 2

var $imgs = $('.page-template-default .gallery img');
$imgs.each(function($img) {
   if ($img.attr('alt') !== undefined) {
      $img.after("<small>" + $img.attr('alt') + "</small>");
   }
});

Answer 3

$('.page-template-default .gallery img').each(function(i,it) {

  if ($(this).attr('alt') !== undefined) {

     var li = $('.page-template-default .gallery li').get(i);
     $( li ).append("<small>" + $(this).attr('alt') + "</small>");
  }

});

Answer 4

Вам нужно перебирать каждый img, если вы хотите использовать свойства каждого из них следующим образом.

var $imgs = $('.page-template-default .gallery li > a > img');
$imgs.each(function() {
   var $img = $(this);
   if ($img.attr('alt') !== undefined) {
      var $li = $img.parent().parent();
      $li.append("<small>" + $img.attr('alt') + "</small>");
   }
});