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

get nested img src from $(this)

本文关键字：嵌套 img src 获取 this      更新时间：2023-09-26

对于这些简单的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>

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

如果它不是从那里调用的，那么this可能指的是窗口，这也不是你想要的。可能只是：

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，您可以使用几行代码对所有执行所需的实际操作。

好的，

多亏了第一条评论，我开始理解 $(this( :)的含义所以我使用 .each 函数完成了这项工作，我的最终 java 片段现在看起来像这样： 

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

相关文章：