jqueryを使ってユニークな画像を取得する方法は？

Question

div内で画像を取得しようとしています

問題は、最初の画像altと同様の出力テキストです。

どうすれば修正できますか？あなたが必要とする

var images = $('.box img').attr('alt'); 
$(".box .img-block").text(images).attr("data-title", images); 



<img src="img1.jpg" alt="Text 1"> 
<div class="img-block"></div> 


<img src="img2.jpg" alt="Text 2"> 
<div class="img-block"></div> 

<img src="img3.jpg" alt="Text 3"> 
<div class="img-block"></div> 

結果

<img src="img1.jpg" alt="Text 1"> 
<div class="img-block">Text 1</div> 

<img src="img2.jpg" alt="Text 2"> 
<div class="img-block">Text 1</div> 

<img src="img3.jpg" alt="Text 3"> 
<div class="img-block">Text 1</div> 

おかげ

Answer 1

jQuery(document).ready(function($){ 
 
    $('.box').each(function() { 
 
    $(this).find('.img-block').text($(this).find('img').attr('alt')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
<img src="img1.jpg" alt="Text 1"> 
 
<div class="img-block"></div> 
 
</div> 
 

 
<div class="box"> 
 
<img src="img2.jpg" alt="Text 2"> 
 
<div class="img-block"></div> 
 
</div> 
 

 
<div class="box"> 
 
<img src="img3.jpg" alt="Text 3"> 
 
<div class="img-block"></div> 
 
</div> 
 

 
<div class="box"> 
 
<img src="img4.jpg" alt="Text 4"> 
 
<div class="img-block"></div> 
 
</div>

Answer 2

jQuery(document).ready(function($){ 
    $('.box img').each(function() { 
     var alt = $(this).attr('alt'); 
     var box = $(this).closest('.box'); 
     box.find('.img-block').text(alt).attr("data-title", alt); 
    }); 
}); 

Answer 3

より良い要素の範囲。この方法について：

<div class="box"> 
    <img src="img1.jpg" alt="Image 1 alt" /> 
    <div class="img-block"></div> 
</div> 

<div class="box"> 
    <img src="img2.jpg" alt="Image 2 alt" /> 
    <div class="img-block"></div> 
</div> 

あなたのjsは、有効にスコープされた各ブロックで動作することができます。あなたはそれをしてください編集することができ、ありがとうございました@Keith

フィドルhere

Answer 4

は、それは罰金！

を働いていますが、このコードでは、同様の問題がありますか？

私はちょうどあなたのコードのようにそれを編集しようとしましたが、あなたはそれをしてください編集することができ、何のメリット

<div class="box"> 
<a href="#"> 
<img src="img1.jpg" alt="Text 1"> 
</a> 
<div class="img-block"></div> 
</div> 

<div class="box"> 
<a href="#"> 
<img src="img1.jpg" alt="Text 2"> 
</a> 
<div class="img-block"></div> 
</div> 

var imagesalt = $('.box a img').attr('alt'); 
$(".box a").attr("data-title", imagesalt); 
$(".box a").attr("data-lightbox", imagesalt);