How can I select elements only if they have a particular previous sibling?

user_5135443 0
Viewed 62

I want to made a $('.x').mouseenter(), only if there is div.y is above and not under!

I have try with .prev(), .prevAll(), .find() and many others but nothing worked!!

<div id='cont'>
    <div>toto</div>
    <div class="y">tata</div>
    <div>titi</div>
    <div>tata</div>
    <div class="x">xxx</div>
    <div></div>
</div>
html jquery
1 Answers

prevAll() and nextAll() ?

https://api.jquery.com/mouseenter/

$(".x").mouseenter(function() {
  let checkYAbove = $(this).prevAll('.y').length;
  let checkYUnder = $(this).nextAll('.y').length;
  
  if (checkYAbove) {
    console.log('Your div ' + $(this).attr('class') + ' get a div y above');
  }
  
  if (checkYUnder) {
    console.log('Your div ' + $(this).attr('class') + ' get a div y under');
  }
});

$(".x").mouseleave(function(){
  console.clear();
});
div { display: inline-block }
div > div:not(.x) { margin:5px; padding:5px; border:1px solid }
.x:hover { color:red }
.y { font-weight:bold }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='cont'>
  <div>div</div>
  <div class="y">Y</div>
  <div>div</div>
  <div class="x">X</div>
  <div>div</div>
</div>
<br>
<div>
  <div>div</div>
  <div class="x">X</div>
  <div>div</div>
  <div class="y">Y</div>
  <div>div</div>
</div>
<br>
<div>
  <div>div</div>
  <div class="y">Y</div>
  <div>div</div>
  <div class="x">X</div>
  <div>div</div>
  <div class="y">Y</div>
  <div>div</div>
</div>

user_4012780
Related