获取图像的alt属性并将其添加到新div中

Question

我有一个滑块，我尝试在滑块中的每个图像上创建一个新的div，该图像应显示每个图像的alt属性。 我只设法得到第一张图片的alt文本，而不是每张图片上都出现的图片，但每张图片都有自己的alt文本..所以这不是我需要的解决方案..我试图找到正确的解决方案，但得到了困顿在这一点..

jQuery(function($){ 
    $("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay"); 
    var title = $(".et_pb_gallery_image img").attr("alt"); 
    $(".image_title").text(title); 
}); 

我也试过这样：

jQuery(function($){ 
    $("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay"); 
    $(".image_title").each(function(){  
     var levelArray = $(".et_pb_gallery_image img").map(function() { 
     return $(this).attr("alt"); 
    }).get(); 
    $(".image_title").html(title); 
    }); 
}); 

但是，这显示每个图像上每一个替代文本...

我使用WordPress与它有一个内置一个主题在内容图像滑块>中，但只在内建滑块中仅当灯箱显示/弹出时显示titel和alt属性。我希望替代文字在图像上可见，这就是我想要做的。

的滑块的外观在HTML页面HTML摘录：

<div class="slider"> 
 
    <div class="post_gallery"> 
 
     <div class="gallery_item"> 
 
      <div class="et_pb_gallery_image"> 
 
       <a href="#" title="image title 01"> 
 
       <img src="image.jpg" alt="Pic 01"> 
 
       <span class="et_overlay"></span> 
 
       <!-- this is created with the code I used --> 
 
       <div class="image_title">Pic 01</div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="post_gallery"> 
 
     <div class="gallery_item"> 
 
      <div class="et_pb_gallery_image"> 
 
       <a href="#" title="image title 02"> 
 
       <img src="image.jpg" alt="Pic 02"> 
 
       <!-- but the second image also has "Pic 01" instead of "Pic 02" --> 
 
       <div class="image_title">Pic 01</div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

试试这个：

$(".et_pb_gallery_image .et_overlay").each(function(){ 
    $("<div class='image_title'></div>").insertAfter(this); 
    var thisImage = $(this).parents('.et_pb_gallery_image').find('img'); 
    var title = thisImage.attr('alt'); 
    $(this).siblings('.image_title').html(title); 
});