按類名查找所有圖像並返回src屬性

Question

我正在嘗試使用類front獲取所有圖像並顯示它們的src屬性。看着它的控制檯它工作，但它返回的圖像與類的前面，還有圖像的類與整個img代碼。我只想要src屬性。我怎麼能做到這一點？

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

結果

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

REPL王牌

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

隨着

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

在你的榜樣，你所得到的圖像父元素的HTML代碼（即div元素）。通過這種方法，您只能獲得front img元素的src屬性。

Answer 2

var $imgs = $('img.front'), 
    arr = []; 

$imgs.each(function() { 
    arr.push($(this).attr('src')); 
}); 

console.log(arr.join(', ')); 

Answer 3

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

無需通過jQuery的功能，通過內部地圖（）

Answer 4

，如果你想在SRC屬性唯一的，你必須做到以下幾點：

$("img.front").each(function (index, element){ 
    alert($("img.front").eq(index).attr("src")); 
}); 

這將打印用FRONT類將每個圖像的SRC刪除。