How do I display the first image from each div with .className?

Question

I want to display only the first image in each div.className.

This...

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

Would display as...

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

ONLY the first image of each div.className would display, without all of the other content. The content is dynamic and changes frequently.

jQuery I've tried:

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

...

(to try to get the SRC of each image...)

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

Nothing is working. Thanks for the help (in advance)! BTW, I'm very front-end HTML/CSS and not great at jQuery.

EDIT: Fixed typos (left out quote marks after image SRC's)

EDIT: Thanks so much everyone! Here's how I implemented the checked answer to work for me:

<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

You have to use .find() along with .first() to accomplish what you want.

Try,

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

Answer 2

You can use .find() and the :first-selector

$('.className').find('img:first').show()

Demo: Fiddle

Answer 3

Here is a JavaScript solution that will do a linear search on each of the child nodes of the element with the class name className . The one question that needs to be asked is: By default, is each image hidden?

    <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>
   <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>
   <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>

<script>
 var el = document.getElementsByClassName('className');
  for(var a = 0; a < el.length; a++) {
   for (var i = 0; i < el[a].childNodes.length; i++) {
    if(el[a].childNodes[i].tagName == "IMG") {
        el[a].childNodes[i].style.display="block";
        console.log(el[a].childNodes[i].src);
        break;
    }
   }
  }

</script>

Demo: Fiddle

Answer 4

After clarifying your question, I made my answer in three parts.

Firstly, wrap text in hide span

$('.className').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="spanhide" style="display: none;" />');

Secondly, hide all images

$('img', '.className').each(function () {
    var img = $(this);
    console.log("hide->" + img.attr('src'));
    img.hide();
 });

Third, display first image in each className div

$('img:first', '.className').each(function () {
    var img = $(this)
    console.log("show->" + img.attr('src'));
    img.show();
});