没有jQuery的使用JavaScript选择器中选择图像

我有一些相似图片：没有jQuery的使用JavaScript选择器中选择图像

<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图像名称（cat01.png，cat03.png和cat03.png）（无jQuery的）。

我该怎么做？

我曾尝试：

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

感谢您的帮助。

来源

2013-07-19 Bizboss

或像这样（没必要使用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); 
    });

来源

2013-07-19 14:36:57 sabof

Thnaks很多，它的作品:) – Bizboss

赞！我将这个函数的主体简化为'return img.src.replace（/.+////,''）;'尽管如此。 [jsfiddle]（http://jsfiddle.net/KGwkN/3） –

然后接受答案的人.. –

您可以使用map并返回所需的src属性的一部分在你images阵列环路（一切后，最后/）：

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

来源

2013-07-19 14:35:44

的console.log(...)线为什么这个downvoted？ – Bergi

这是怎么得到-1和其他几乎相同的答案得到+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

所以建立你的名字的数组，只需更换与images[i] = images[i].src.replace(/.+\//, '')

来源

2013-07-19 14:41:32

没有jQuery的使用JavaScript选择器中选择图像

回答

相关问题