画像のalt属性を新しいdivに追加する

Question

私はスライダーを持っていて、各画像のalt属性を表示するスライダー内のすべての画像に新しいdivを作成しようとしています。 私はすべての画像上に表示される最初の画像の代替テキストを取得することしかできませんでしたが、すべての画像には独自の代替テキストがあります。これは私が必要とした解決策ではありません..正しい解決策を見つけようとしましたが、私が構築されているテーマでワードプレスを使用して...

を

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); 
    }); 
}); 

しかし、これは、すべての画像上のすべての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); 
}); 

また、私はこれを試してみましたコンテンツイメージスライダでは>がスライダのみのビルドライトボックスが表示/ポップアップするときにのみ、titelとalt属性が表示されます。私は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); 
});