Как добавить Class () к картинкам определенного формата

Question

Привет, мне нужно стилизовать изображения только в формате JPG.(jQuery)

Мне нужно, чтобы класс был применен к 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-заканчивается-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 */
}