Question

<div id="a">
  <div id="b" nopopup>
    <div id="c"> 
      <div id="d">

I use a jQuery .hover() to popup a menu when particular <div>s are moused over. A string, $selector, identifies which <div>s get a hover.

$($selector).hover( 
  // popup the menu
)

That works. I now want to thwart operation of the .hover() when an ancestor <div> has the valueless attribute “nopopup”, as <div> b above does. That “nopopup” would thwart any hover for c and d, even if the $selector selected them. The number of levels between the hover candidate and the thwarting nopopup varies.

I need something like:

$($selector).not( one of the selected node's parents has the attribute "nopopup" ).hover( 
  // popup the menu
)

What goes in those parentheses? Or is this the wrong approach?

Answer 1

Can use several approaches. Following assumes that nopopup is a class since html isn’t valid

$($selector).hover( 
  if( !$(this).closest('.nopopup').length){
       /* run code when nopop isn't ancestor*/
   }
)

OR

$($selector).not('.nopopup '+$selector).hover(....