Добавьте CSS к указанному c изображению с тегом alt, используя jQuery

Question

Я пытаюсь найти указанный c текст в теге alt изображения и добавить CSS к этому изображению, используя jQuery. Я использую :contains из jQuery, но я не уверен, что это лучший способ go? Вот что я сейчас пытаюсь:

jQuery

var imgAlt = $("img").attr("alt");

$("imgAlt:contains('morning hike')").css("border", "5px solid black");

HTML:

<div>
  <img src="https://images.unsplash.com/photo-1584879788725-56a4b394de8d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="candles on table">
  <img src="https://images.unsplash.com/photo-1584354012731-ba34cef5963f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="morning hike">
</div>

Надеюсь, что имеет смысл?

Answer 1

Вам не обязательно нужен javascript, селектор может быть создан с использованием только css селекторов атрибутов: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

img[alt*='morning hike'] { border: 5px solid #000 }

Мы могли бы использовать тот же селектор в вашем jQuery

$("img[alt*='morning hike']").css("border", "5px solid black");