jQuery for循环未运行函数

Question

我试图在jQuery中找到所有'img'元素的循环，并根据元素的'caption'属性的值在它们下面放置标题。每当我运行下面的循环时，我都没有任何图像下的标题。

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

您可以通过.myimage元素这样的循环，用.after()的回调函数

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

一个小小的音符，不要让你自己属性。请改用自定义数据属性，如data-caption="something"。

jsFiddle example