按类名查找所有图像并返回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删除。