Question

我正在尝试在div中获取图像alt

问题是，我有一个类似的输出文字，来自第一张图片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可以处理每个块的大小范围。

小提琴here

Answer 4

@Keith非常感谢，它工作正常！，

但是这段代码有类似问题，请你编辑一下吗？

我试着像你的代码一样编辑它，但没有任何好处

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

如何使用jquery获取独特的图像？

4 个答案: