按类名查找所有图像并返回 src 属性答案

【问题标题】：Finding all images by class name and returning src attribute按类名查找所有图像并返回 src 属性
【发布时间】：2012-04-11 08:29:48
【问题描述】：

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

【问题讨论】：

标签： jquery

【解决方案1】：

替换

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

有

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

不需要通过map()里面的jQuery函数

【讨论】：

【解决方案4】：

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

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

这将打印出每个带有 FRONT 类的图像的 SRC。

【讨论】：

使用索引参数有点浪费代码。您可以简单地编写 alert($(this).attr("src")); ，它不会要求 jQuery 返回并查找与您的选择器匹配的所有元素，只是为了选择一个已经传递给回调函数的元素。