in jquery how to set a function on an element x, only if it is under another y-CodePudding

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 >tata</div>
<div ">titi</div>
...
<div ">tata</div>
<div >xxx</div>
<div ">...</div>

</div>

CodePudding user response：

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 || checkYUnder) {
    console.log('get div y before your div x');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='cont'>
...
<div>toto</div>
...
<div >tata</div>
<div>titi</div>
...
<div>tata</div>
<div >xxx</div>
<div>...</div>

</div>


<div>
  <div >Test</div>
</div>

CodePudding user response：

prevAll works

const $prev = $(".x").prevAll(".y")
if ($prev.length) $(".x").on("mouseover",function() {
  console.log(this.className)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont">
  ...
  <div>toto</div>
  ...
  <div >tata</div>
  <div>titi</div>
  ...
  <div>tata</div>
  <div >xxx</div>
  <div>...</div>
</div>