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

【问题标题】：Copy image alt text and paste into div with jQuery使用 jQuery 复制图像 alt 文本并粘贴到 div
【发布时间】：2017-10-24 15:50:01
【问题描述】：

我在页面上有多个用 div 包裹的图像。我想复制图像替代文本并将其粘贴到下一个 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);
});

【问题讨论】：

如果我错了，请纠正我。你想实现这样的目标。
（此处为alt值）

标签： javascript jquery

【解决方案1】：

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

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

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

Working Demo

【讨论】：

我想，在这种特殊情况下，您不需要在回调中使用参数i :)
是的。可以省略:)

【解决方案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() 提供一个函数来缩短此时间，该函数针对每个匹配的元素实例执行：

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

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

【讨论】：

【解决方案3】：

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

试试这个。

【讨论】：

【解决方案4】：

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

$("img").each(function(i) {
    $(this).next().html($(this).attr("alt"));
});

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

【讨论】：