jQuery for循环未运行功能

Question

我正在尝试在jQuery中创建一个循环，以根据元素的'caption'属性的值查找所有'img'元素并将标题放在其下方。 每当我在下面的循环中运行时，任何图像下都没有标题。

for (var i = 0; i < $('.myimage').length; i++) {
    $('.myimage')[i].after('<h6>' + $('.myimage').attr('caption') + '</h6>');
};

但是，当我运行这段代码时

$('.myimage').after('<h6>TEST</h6>');

“ TEST”一词出现在所有图像下方。 因此，我知道我的html是正确的，我没有错别字，并且选择器正在运行，我只是无法使for循环正常工作...我做错了什么？

Answer 1

$('.myimage')[i]返回DOM元素（不是jQuery对象），因此没有after方法。 如果要循环，只需使用.each

$(".myimage").each(function() {
    //this refers to each image
    $(this).after('<h6>' + $(this).attr('caption') + '</h6>');
});

Answer 2

您可以使用.after()的回调函数.myimage这样的.myimage元素

$('.myimage').after(function(){
    return '<h6>' + $(this).attr('caption') + '</h6>';
});

一个小注意事项，不要组成您自己的属性。 请改用自定义数据属性，例如data-caption="something" 。