javascript - 如何将适当的属性附加到一系列元素？

Question

我有这段代码：

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

基本上，它将图像的替代文本附加到图像本身旁边。

问题是，我有一个包含 10 张图片的页面，并且附加的 alt 文本总是相同的，取自第一张图片。

有没有办法将每个替代文本返回到相应的图像？

Answer 1

似乎是最简单的方法：

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

jsFiddle 演示

稍微解释一下：

1. .attr()可以与函数一起用作其第二个参数。alt通常它用于使用函数的返回值设置属性（这次）。在这个中，我什么都不返回，只是用它来循环遍历alt指定图像的属性。

2. this这里将指的img是当前使用的

3. .closest()将返回与选择器匹配的图像的最近父级'li'。

Answer 2

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>");
   }
});

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

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