javascript - 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

You can use the attribute ends with selector, $=:

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

The ends with selector will inaccurately miss <img src="test.png?id=1">.

You could also use the attribute contains selector, *=:

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

The contains selector will inaccurately select <img src="test.png.gif" />.

If file path is all you have to go by, you'll unavoidably have to accept one of these exceptions (unless you want to implement some more advanced filter that strips values after ? or #).

Answer 2

您还可以使用 CSS3属性选择器：

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