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

稍作解释：

.attr()可以与函数一起用作第二个参数。通常，它用于使用函数的返回值设置属性（此时为alt）。在这一个中，我不返回任何内容，只是使用它来遍历指定图像的alt属性。
this此处将引用当前使用的img
.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>"); } });。

{{1}}

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

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

4 个答案: