javascript - 使用不带 jQuery 的 javascript 选择器来选择图像

Question

我有一些这样的图像：

<img src="http://127.0.0.1/test/images/cat01.png" alt="00" class="cat_img">
<img src="http://127.0.0.1/test/images/cat02.png" alt="00" class="cat_img">
<img src="http://127.0.0.1/test/images/cat03.png" alt="00" class="cat_img">

我想用javascript（不带jQuery）选择图像名称（cat01.png、cat03.png和cat03.png）。

我怎样才能做到这一点 ？

我努力了 ：

var images = Array.prototype.slice.call(document.getElementsByClassName('cat_img'));
console.log('Images '+images);

感谢帮助。

Answer 1

或者像这样（不需要使用Array.prototype.slice）

var images = Array.prototype.map.call(
  document.querySelectorAll(".cat_img"),
  function(img) {
    var src = img.src, 
        lastIndex = src.lastIndexOf('/');
    return src.slice(lastIndex + 1);
  });

Answer 2

您可以使用map遍历您的images数组并返回您想要的属性部分（最后一个之后的所有内容）：src/

var images = Array.prototype.slice.call(document.getElementsByClassName('cat_img'));
var imageNames = images.map(function( image ) {
    return image.src.substring( image.src.lastIndexOf("/") + 1 );
} );

console.log(imageNames);

jsfiddle

Answer 3

这是一个使用带有循环的正则表达式的简单示例。

var images = Array.prototype.slice.call(document.getElementsByClassName('cat_img'));
for(i = 0; i < images.length; i++) {
    console.log(images[i].src.replace(/.+\//, ''));
}

jsfiddle

因此，要构建您的名称数组，只需将该console.log(...)行替换为images[i] = images[i].src.replace(/.+\//, '')