Проверить, существует ли элемент с атрибутом данных, равным значению

Question

У меня огромная проблема с проверкой, есть ли среди элементов тот, у которого атрибут данных равен другому значению.

Код HTML выглядит следующим образом:

<ul class="menu">
<li data-img="1">Demo</li>
<li data-img="2">Demo</li>
<li data-img="3">Demo</li>
<li data-img="4">Demo</li>
</ul>

<div class="banners">
<img src="........." data-img="1"/>
<img src="........." data-img="2"/>
<img src="........." data-img="4"/>
</div>

Код JS выглядит следующим образом:

$('.menu li').each(function(){
$(this).hover(function(){
var el = $(this).attr('data-img');
var el2 = $('.banners').find('[data-img=' + el + ']'); 

// or maybe it should be: 
var el2 = $('.banners').attr('data-img');

// Here I would like to check if el2 equals to el exists add to this element (el2) the class name "foo"

}, function(){
});
});

Я не знаю, нужно ли заменить все в

Answer 1

Вам не нужно знать, существует ли элемент; вы можете просто addClass к результату селектора, и если нет совпадений с селектором, ничего не произойдет. В части mouseleave вы removeClass из того же изображения:

$('.menu li').each(function() {
  $(this).hover(function() {
      var el = $(this).attr('data-img');
      $('.banners').find('[data-img=' + el + ']').addClass('foo');
    },
    function() {
      var el = $(this).attr('data-img');
      $('.banners').find('[data-img=' + el + ']').removeClass('foo');
    });
});

img {
  opacity: 0.3;
}

.foo {
  opacity: 1.0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li data-img="1">Demo</li>
  <li data-img="2">Demo</li>
  <li data-img="3">Demo</li>
  <li data-img="4">Demo</li>
</ul>

<div class="banners">
  <img src="https://via.placeholder.com/150/0000FF" data-img="1" />
  <img src="https://via.placeholder.com/150/00FF00" data-img="2" />
  <img src="https://via.placeholder.com/150/FF0000" data-img="4" />
</div>

Answer 2

Если вы хотите сбросить класс «foo» для других изображений, если el2 существует, и, если он не существует, класс «foo» должен быть в последнем изображении, которое имеет атрибут data-img, равный el, вы можете сделать это так:

$('.menu li').each(function() {
  $(this).hover(function() {
      var el = $(this).attr('data-img');
      var el2 = $('.banners').find('[data-img=' + el + ']');
      if (el2.length) {
        let images = $('.banners img');
        images.each(function() {
          $(this).removeClass('foo');
        });
        el2.addClass('foo');
      }
    },
    function() {});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li data-img="1">Demo</li>
  <li data-img="2">Demo</li>
  <li data-img="3">Demo</li>
  <li data-img="4">Demo</li>
  <li data-img="5">Demo</li>
</ul>

<div class="banners">
  <img src="https://dummyimage.com/100x100/000/fff" data-img="1" />
  <img src="https://dummyimage.com/100x100/000/fff" data-img="2" />
  <img src="https://dummyimage.com/100x100/000/fff" data-img="3" />
  <img src="https://dummyimage.com/100x100/000/fff" data-img="4" />
</div>

Answer 3

Вы можете сделать что-то вроде этого:

$('.menu li').each(function(){
  $(this).hover(function(){
     let img = $(this).data('img');
     let bannerImg = $('.banners').find(`img[data-img="${img}"]`);
     if (bannerImg.length) {
       bannerImg.addClass('foo');
     }
  }, function() {
     let img = $(this).data('img');
     let bannerImg = $('.banners').find(`img[data-img="${img}"]`);
     if (bannerImg.length) {
       bannerImg.removeClass('foo');
     }
  });
});

Надеюсь, это сработает.