如何给某种格式的图片添加addClass()

Question

你好，我只需要设置 JPG 格式图像的样式。 (jQuery)

当 jpeg 放置在特定容器中时，我需要将类应用于 jpeg（并非页面上的所有 jpg）。
例如：

<img src="non-jpeg.jpg"> <!--no changes made-->
<img src="jpeg-image.jpg"> <!--no changes made-->
<div class="spec-container"><img src="jpeg-image.jpg"></div> <!--changes applied-->

像这样

<img src="non-jpeg.jpg">
<img src="jpeg-image.jpg">
<div class="spec-container"><img src="jpeg-image.jpg" class="styled"></div>  

提前致谢！

Answer 1

您可以对其中的图像使用 attribute-ends-with 选择器 来完成此操作容器，如下所示：

$(".spec-container img[src$='.jpg']").addClass("styled");

如果您希望选择器更宽容一些，请使用 .filter() ，如下所示：

$(".spec-container img").filter(function() {
  return /\.[jpg$|jpeg$]/i.test(this.src);
}).addClass("styled");

Answer 2

你可以用纯 CSS 来做到这一点。将 class="styled" 放在所有图像上，然后在 CSS 中：

img.styled
{
    /* put styles that apply to non-styled images here */
}

div.spec-container img.styled
{
    /* put styles here that you want only applied to the "styled" images */
}