Question

我正在尝试添加数据标题和数据灯箱，并在里面获取图像。

问题是，我有一个类似的输出，仅来自第一张图片alt！

我们如何解决？

jQuery(document).ready(function($) {
  var imagesalt = $('.box a img').attr('alt');
  $(".box a").attr("data-title", imagesalt);
  $(".box a").attr("data-lightbox", imagesalt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class="box">
  <a data-lightbox="text 1" data-title="text 1" href="#">
    <img src="img1.jpg" alt="Text 1">
  </a>
  <div class="img-block"></div>
</div>

<div class="box">
  <a data-lightbox="text 1" data-lightbox="text 1" href="#">
    <img src="img1.jpg" alt="Text 2">
  </a>
  <div class="img-block"></div>
</div>

我尝试了多种方式编写代码，但没有用处

由于

Answer 1

您的查询含糊不清，这就是原因！

当您请求＆＃34; alt＆＃34;如果属性为$(".box a img").attr("alt")，您确实会接受许多对象，但attr()仅返回第一个结果。

在纯jQuery中，您可以使用.each()：

来完成

$(".box a img").each(function(){
  var imageAlt = $(this).attr("alt");
  var parent = $(this).parent();
  parent.attr("data-lightbox", imageAlt);
  parent.attr("data-title", imageAlt);
});

这应该会给你你期望的行为。

Answer 2

使用“box”类迭代每个div - 然后在其中找到图像，获取其中的alt文本并将其应用为div的数据属性。注意我放入console.log来演示正确找到alt文本。 Ypu可以使用控制台检查器来查看数据属性是否正确应用于div。

$(document).ready(function(){
  $(".box").each(function(){
    var imageAlt = $(this).find('img').attr('alt');
    $(this).attr("data-title", imageAlt);
    console.log(imageAlt);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Answer 3

试试这个：

$('.box a img').each(function(){
  $(this).parent().find("a").attr("data-title", $(this).attr("alt");
  $(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
 })

Answer 4

.attr（）方法仅获取匹配集中第一个元素的属性值。但是，.attr（）方法为匹配集中的每个元素设置属性值。

enter link description here

如何使用jquery获取图像alt？

4 个答案:

试试这个：