Finding all images by class name and returning src attribute
<p>I am trying to get all the images with class <code>front</code> 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?</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="results"&gt;&lt;/div&gt;

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

<p><strong>jQuery</strong></p>

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


console.log(linkArray);
</code></pre>

<p>​
<strong>Results</strong></p>

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