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

替换

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

使用

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

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

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

无需在map（）

中传递jQuery函数

Answer 4

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

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

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

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

4 个答案: