Check if element with data attribute equal to value exist

Question

I have a huge problem with verification if among of elements is a one which has data attribute equal to another value.

The HTML code is like this:

<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>

The JS code is like this:

$('.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(){
});
});

I'm dunno if I should replace all in

Answer 1

You don't need to know whether the element exists; you can simply addClass to the result of the selector and if there are no matches to the selector nothing will happen. In the mouseleave part you removeClass from the same image:

 $('.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

If you want to reset the class "foo" for other images if el2 exists and, if it not exists, the class "foo" should be in the last image which has the data-img attribute equal to el, you can do it like this:

 $('.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

You can do something like this:

$('.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');
     }
  });
});

Hopefully, It will work.