Question

I am trying to get all the images with class front and display their src attribute. Looking at the console it’s working, but it returns images with class front and also images with class back along with the entire img code. I only want the src attribute. How can I o about doing this?

HTML

<div id="results"></div>

<div id="mm_grid">
   <!-- Grid contents written dynamically -->
   <div class="mm_row">
      <div class="mm_window" id="tile0" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile1" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile2" onclick="flipImage(this)"><img class="front" src="public/images/mm_image8.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile3" onclick="flipImage(this)"><img class="front" src="public/images/mm_image0.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile4" onclick="flipImage(this)"><img class="front" src="public/images/mm_image3.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile5" onclick="flipImage(this)"><img class="front" src="public/images/mm_image2.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
</div>​

jQuery

var linkArray = $("img.front").map(function() {
    return $(this).parent().html();
}).get();


console.log(linkArray);

​
Results

["<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image8.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image0.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image3.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image2.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">"]

Answer 1

Replace

return $(this).parent().html();

With

return $(this).attr('src');

In your example you are getting the HTML code of the image parent element (i.e. the div element). This way you get the src attribute of the front img element alone.