javascript - 如何使用 .className 显示每个 div 的第一张图片？

Question

我只想显示每个 div.className 中的第一张图片。

这...

<div class="className">
  <p>Yo yo yo</p>
  <p><img src="snoop.jpg" /></p>
</div>
<div class="className">
  Helloooooo
  <img src="biggie.jpg" />
  <img src="tupac.jpg" />
  <img src="coolio.jpg" />
  Blah blah blah
</div>
<div class="className">
  <div><img src="dmx.jpg" /></div>
  <div><img src="willsmith.jpg" /></div>
</div>

将显示为...

[snoop.jpg]
[biggie.jpg]
[dmx.jpg]

只会显示每个 div.className 的第一张图像，而不会显示所有其他内容。内容是动态的并且经常变化。

我试过的 jQuery:

var imgarray = $(".className").find("img:first").attr('src');
for(i = 0; i < imgarray.length; i++){
  $('body').append('<img src=\"'+imgarray[i]+'\">');
}

...

(尝试获取每个图像的 SRC...)

$('.className').each(function() {
  alert( $('img').attr('src') );
});

没有任何效果。我在这里先向您的帮助表示感谢)!顺便说一句，我非常擅长前端 HTML/CSS，并不擅长 jQuery。

编辑:修复了拼写错误(在图像 SRC 后遗漏了引号)

编辑:非常感谢大家!以下是我如何实现已检查的答案以供我使用:

<style type="text/css">
  .className {
    display: none;
  }
</style>

<div class="className">
  <p>Yo yo yo</p>
  <p><img src="snoop.jpg" /></p>
</div>
<div class="className">
  Helloooooo
  <img src="biggie.jpg" />
  <img src="tupac.jpg" />
  <img src="coolio.jpg" />
  Blah blah blah
</div>
<div class="className">
  <div><img src="dmx.jpg" /></div>
  <div><img src="willsmith.jpg" /></div>
</div>

<script type="text/javascript">

  $('.className').each(function() {
    var imagesrc = $(this).find('img').first().attr('src') ;
    $('body').append( '<img src=\"' + imagesrc + '\">');
  });

</script>

Answer 1

你必须使用 .find() 和 .first() 来完成你想要的。

尝试，

$('.className').each(function() {
  alert( $(this).find('img').first().attr('src') );
});