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 张图像的页面，并且附加的替代文本始终相同，取自第一张图像。

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

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' 匹配的图像的最近父级。