Как я могу нацелить изображение с HREF с JQuery?

Question

Я пытаюсь добавить метки категории поверх изображения href с помощью jquery. Теперь у меня есть следующая скрипка: https://jsfiddle.net/Eddiebouncer/43x6L2bj/ JQuery проверяет, какая категория в ссылке и добавляет метку. Но это также предназначается для текстовых ссылок (что и следовало ожидать в конце).

Как я могу нацелить только href с изображением в нем, чтобы наложить метку?

С уважением, Эд'

HTML

<div style="padding:20px;margin-top:40px;">
  Example with 2 images with category A and B. Script generates a category-label accordingly.
</div>
<div class="relative-container">
  <a href="something/category-A/#"><img src="https://placehold.it/300x150" /></a>
</div>
<div class="relative-container">
  <a href="something/category-B/#"><img src="https://placehold.it/300x150" /></a>
</div>
<div style="padding:20px;">
  Here a text link - but this shouldn't be targeted: <a href="something/category-A/#">read more</a>
</div>

JS

$(document).ready(function() {
  $('a[href*="category-A"]').append('<div id="overlay-A">category A</div>');
  $('a[href*="category-B"]').append('<div id="overlay-B">category B</div>');
});

CSS

.relative-container {
  position: relative;
}

#overlay-A,
#overlay-B {
  display: inline block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px;
  color: #fff;
}

#overlay-A {
  background: rgba(0, 0, 120, 0.75);
}

#overlay-B {
  background: rgba(0, 120, 0, 0.75);
}

Answer 1

Легко, используйте класс .relative-container, чтобы различать два

$(document).ready(function() {
  $('.relative-container a[href*="category-A"]').append('<div id="overlay-A">category A</div>');

  $('.relative-container a[href*="category-B"]').append('<div id="overlay-B">category B</div>');
});

или проверьте, есть ли у ссылки изображение

$('.relative-container a[href*="category-A"]').each(function() {
   if($(this).find('img').length) {
      $(this).append('<div id="overlay-B">category B</div>');
    }
})