Question

我正在尝试遍历轮播插件中的每个缩略图，获取每个图像的alt属性，然后将其作为跨度附加。基本上为每张图片添加标题。

我的问题是alt属性总是返回undefined ..

标记是这样的：

<div class="galleria-image">
<img src="http://placehold.it/350x150" alt="Alt caption 1" />
</div>

<div class="galleria-image">
<img src="http://placehold.it/350x150" alt="Alt caption 2" />
</div>

<div class="galleria-image">
<img src="http://placehold.it/350x150" alt="Alt caption 3" />
</div>

剧本：

$(".galleria-image").each(function() {
var thumbN = $(this);
var thumbImgAlt = thumbN.closest('img').attr('alt');
thumbN.append('<span style="color:red;">' + thumbImgAlt + '</span>');
});

我尝试了很多不同的路线，但实际上除了'undefined'或[object，object]之外，实际上无法获得alt文本

非常感谢任何指针，非常感谢。

在这里有一个演示： http://codepen.io/h0rhay/pen/bDFyt

Answer 1

试试这个，

$(".galleria-image").each(function() {
var thumbN = $(this);
var thumbImgAlt = thumbN.find('img').attr('alt');
thumbN.append('<span style="color:red;">' + thumbImgAlt + '</span>');
});

实际上.closest（）将遍历DOM树以选择匹配的元素。但在你的情况下，你应该使用.find（）或.children（）来实现你的结果

参考：.closest()，.find()，.children()

DEMO

Answer 2

closest查找html树，您希望find查找后代

var thumbImgAlt = thumbN.find('img').attr('alt');

如有疑问，请检查jQuery API。给出了每种方法的例子

<强> closest() docs

<强> find() docs

Answer 3

使用children()而不是closest()有效。由于所需的图像是galleria-image div的孩子。

$(".galleria-image").each(function() {
    var thumbN = $(this);
    var thumbImgAlt = thumbN.children('img').attr('alt');
    thumbN.append('<span style="color:red;">' + thumbImgAlt + '</span>');
});

children()也应该更有效率，因为它只会搜索$(this) div。

Answer 4

请参阅最接近的文档：

closest

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

您正在以错误的方向搜索树（向上而不是向下）。

这会导致您获得一组零图像中第一张图像的alt属性。

您想使用find来获取div的后代而不是祖先。

var thumbImgAlt = thumbN.find('img').attr('alt');

alt属性返回undefined

4 个答案:

DEMO