CSS或JQuery中的特定图像扩展选择器

Question

我的项目中有几个图像，有几个扩展名（jpg，png，gif）。

有没有办法根据css或JQuery中的扩展名选择这些图像。

<img src="img/img.jpg"/>
<img src="img/img1.png"/>
<img src="img/img2.gif"/>

例如，我希望扩展名为.png的图片具有height: 200px;属性。

Answer 1

您可以使用属性以选择器结尾$=：

$('img[src$=".png"]').height(200);

以选择器结尾的将错误地错过<img src="test.png?id=1">。

您还可以使用属性包含选择器*=：

$('img[src*=".png"]').height(200);

包含选择器将错误地选择<img src="test.png.gif" />。

如果您只需要文件路径，那么您将不可避免地接受其中一个例外（除非您想要实现一些更高级的过滤器，以便在?或#之后删除值）。

Answer 2

您还可以使用CSS3 attribute selectors：

img[src$='.png'] {
    height: 200px;
}

浏览器支持

Chrome    Firefox               IE     Opera     Safari
All       1.0 (1.7 or earlier)  7      9         3

Answer 3

要选择所有这些内容，您需要使用.filter()：

var images = $('img').filter(function() {
    return /\.(png|jpg|gif)$/.test(this.src);
}).height(200);