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

【问题标题】：Getting the alt attribute of images an adding this in new div获取图像的 alt 属性并将其添加到新 div
【发布时间】：2016-12-24 01:11:01
【问题描述】：

我有一个滑块，我尝试在滑块中的每个图像上创建一个新的 div，它应该显示每个图像的 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 > 但内置滑块仅在显示/弹出灯箱时才显示 title 和 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>

【问题讨论】：

请问你有你正在使用的 HTML 吗？
您可以添加一些 HTML 代码，例如只有一个带有图像的 div 吗？
@Ash 我确实添加了 HTML sn-p
@kar 抱歉，我在您添加之前查看了它

标签： jquery html arrays image attr

【解决方案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);
});

【讨论】：