从 $(this) 获取嵌套的 img src

Question

对于其中一个简单的 CMS，我需要将 src 从标签传递到父级 div 的背景图像 url。有了确定的 id，一切正常，但现在我正在尝试自动化它，但它不会工作。虽然我很确定这应该是一些语法错误，但我对 Java 还是很陌生。在此先感谢 4 任何提示！ :)

到目前为止，这是我的代码：

      var imageUrl = $(this).find('img').attr('src');
      console.log(imageUrl)

      $('.background-image').css('background-image', 'url(' + imageUrl + ')');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="background-image">
  <img src="myimg1.jpg" class="imgtag">
</div>

<div class="background-image">
  <img src="myimg2.jpg" class="imgtag">
</div>

<div class="background-image">
  <img src="myimg3.jpg" class="imgtag">
</div>

Answer 1

您所拥有的应该有用...除了 this 可能不是您认为的那样。如果从 click 事件之类的事件中调用 $(this)，this 将设置为被单击的元素，因此它必须包含图像。

如果它不是从那里调用的，那么 this 可能指的是 window，这也不是您真正想要的。可能只是：

var imageUrl = $('#some-container').find('img').attr('src');

是您想要的，#some-container 是您可以定位的图像的某些父元素。

如果你想将它应用到父元素中的多个元素，你可以使用这样的东西：

$('#some-parent').find('img').each(image => {
    let imageUrl = $(image).attr('src');
    // do something with imageUrl
});

它将遍历 #some-parent 内的每个 img，您可以使用几行代码对所有这些执行您需要的实际操作。

Answer 2

好的，感谢第一条评论，我开始理解 $(this) 的含义 :) 所以我使用 .each 函数让它工作，我的最终 java 片段现在看起来像这样：

$(".full-image").each(function() {
   var imageUrl = $(this).find('img').attr('src');
   console.log(imageUrl)
   $(this).css('background-image', 'url(' + imageUrl + ')');
  });

从 $(this) 获取嵌套的 img src

get nested img src from $(this)

javascript

jquery

syntax-error