How can I use same JS function using multiple classes of same name?

Question

I am trying to have this logic work for multiple elements of the same class. I have a list of navigation elements that are grouped into categories. I am using the same class multiple times, however the Javascript logic I've implemented only works for the first one.

How can I fix this?

HTML

<ul class="list_content all">
<div>
  <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg">
    <li>Ozone Residences</li>
  </a>
</div> 
<div class="ozone_caption">
  <div class="caption_grid">
    <h1>Cronella NSW<br>Residential</h1>
    <h1><br>2018</h1>
  </div>
</div>
</ul>

<ul class="list_content residential">
<div>
  <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg">
    <li>Ozone Residences</li>
  </a>
</div> 
<div class="ozone_caption">
  <div class="caption_grid">
    <h1>Cronella NSW<br>Residential</h1>
    <h1><br>2018</h1>
  </div>
</div>
</ul>

JavaScript

$(".ozone").mouseenter(function() {
  if ($(this).parent('div').children('div.image').length) {
    $(this).parent('div').children('div.image').show();
  } else {
    var image_name=$(this).data('image');
    var imageTag='<div class="image" style="position:absolute; right: 50px; bottom: 50px">'+'<img src="'+image_name+'" alt="image" height="500" />'+'</div>';
    $(this).parent('div').append(imageTag);
  }
});

$(".ozone").mouseleave(function() {
  $(this).parent('div').children('div.image').hide();
});

$('.ozone').hover(
  function() {
    $('.ozone_caption').css('opacity', '1')
  }, 
  function() { 
    $('.ozone_caption').css('opacity', '0')
  });

Answer 1

You can use the .each() function to iterate over all the instances of the ozone class.

Note that you also have to alter the approach towards modifying the ozone_caption instances. I'm assuming you want to only operate on the associated ozone_caption instead of all of them.

$('.ozone').each(function() { 
  $(this).mouseenter(function() {
      if ($(this).parent('div').children('div.image').length) {
          $(this).parent('div').children('div.image').show();
      } else {
          var image_name=$(this).data('image');
          var imageTag='<div class="image" style="position:absolute; right: 50px; bottom: 50px">'+'<img src="'+image_name+'" alt="image" height="500" />'+'</div>';
          $(this).parent('div').append(imageTag);
      }
  });

  $(this).mouseleave(function() {
      $(this).parent('div').children('div.image').hide();
  });

  $(this).hover(
    function() {
      $(this).parent('div').next('.ozone_caption').css('opacity', '1')
    }, 
    function() { 
      $(this).parent('div').next('.ozone_caption').css('opacity', '0')
      }
  );
});

Answer 2

Gonna post this answer for you, but I still don't know what you are trying to do exactly. Based on what you provided this should work but you'll have to customize it for your needs. Keep in mind with the absolute positioning, if you don't specify position: relative; on the parent it will use the body .

 $(".ozone").mouseenter(function() { var image = $(this).siblings('div.image'); if (image.length) { image.show(); } else { var image_name=$(this).data('image'); var imageTag='<div class="image">'+'<img src="'+image_name+'" alt="image" height="500" style="position:absolute; right: 50px; bottom: 50px" />'+'</div>'; $(this).parent('div').append(imageTag); } }); $(".ozone").mouseleave(function() { $(this).siblings('div.image').hide(); }); $('.ozone').hover(function() { $(this).parent().siblings('.ozone_caption').toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul class="list_content all"> <div> <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg"> <li>Ozone Residences</li> </a> </div> <div class="ozone_caption"> <div class="caption_grid"> <h1>Cronella NSW<br>Residential</h1> <h1><br>2018</h1> </div> </div> </ul> <ul class="list_content residential"> <div> <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg"> <li>Ozone Residences</li> </a> </div> <div class="ozone_caption"> <div class="caption_grid"> <h1>Cronella NSW<br>Residential</h1> <h1><br>2018</h1> </div> </div> </ul>