1

我正在尝试获取所有带有类的图像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="">"]
4

4 回答 4

3

代替

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

和

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

在您的示例中，您将获得图像父元素（即 div 元素）的 HTML 代码。这样您就可以单独获得 img 元素的src属性。front

于 2012-04-11T08:32:45.160 回答
2 
var $imgs = $('img.front'),
    arr = [];

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

console.log(arr.join(', '));
于 2012-04-11T08:33:06.720 回答
0 
var linkArray = $("img.front").map(function() {
    return this.src;
}).get();

无需在 map() 中通过 jQuery 函数

于 2012-04-11T08:34:06.517 回答
0

如果您只需要 SRC 属性，则必须执行以下操作：

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

这将使用 FRONT 类打印出每个图像的 SRC。

于 2012-04-11T08:35:25.577 回答