Question

我在页面上有多个用div包装的图像。我想复制图像alt文本并将其粘贴到下一个img-txt div中。

<div class="container">
  <img src="kakka.jpg" alt="Text">
  <div class="img-txt"></div>
</div>

<div class="container">
  <img src="kakka2.jpg" alt="Text2">
  <div class="img-txt"></div>
</div>

问题是我到处都是第一个替代文字。我知道这很容易，但我不能让这个工作......

$(".container").each(function(i) {
  var alt = $("img").attr("alt");
  $(".img-txt").text(alt);
});

Answer 1

您的代码的问题是，遍历纠正兄弟，然后获取替代文字。

更聪明的解决方案是，使用.text()的回调函数以及遍历兄弟img元素：

$(".container .img-txt").text(function() {
   return $(this).siblings('img').attr("alt");
});

<强> Working Demo

Answer 2

问题是因为您在循环的每次迭代中选择所有 img和.img-txt元素。在元素集合上调用attr()只会从该集合中的 first 元素中检索属性。

您需要使用this关键字来引用each()循环中的当前元素以查找其中的元素：

$(".container").each(function() {
  var alt = $(this).find("img").prop("alt");
  $(this).find(".img-txt").text(alt);
});

但是，你可以通过为text()提供一个针对每个匹配元素实例的函数来缩短它：

＆＃13;

$(".container .img-txt").text(function() {
  return $(this).prev('img').prop('alt');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="kakka.jpg" alt="Text">
  <div class="img-txt"></div>
</div>

<div class="container">
  <img src="kakka2.jpg" alt="Text2">
  <div class="img-txt"></div>
</div>

＆＃13;

Answer 3

$(".container").each(function(i) {
  var alt = $(this).children('img').attr("alt");
  $(this).children('.img-txt').text(alt);
});

试试这个。

Answer 4

在这里你有另一种方法将alt img复制到div中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="kakka.jpg" alt="Text">
  <div class="img-txt"></div>
</div>

<div class="container">
  <img src="kakka2.jpg" alt="Text2">
  <div class="img-txt"></div>
</div>

500 Internal Server Error

复制图像alt文本并使用jQuery粘贴到div中

4 个答案: