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(/.+\//, '')

使用没有jQuery的javascript选择器来选择图像

3 个答案: