Why does my jQuery selector select all anchors inside the list element?

Question

Been struggling with this simple selector problem a couple of hours now and must be missing something obvious. I have a <ul> in which some <li>s have nested <ul>s. Each <li> contains a link and when this is clicked I want to execute a function (rather than navigate), but importantly, this should only happen for the links contained in the parent <ul> and not any links that may be present in a nested <ul>. Simple you'd think:

HTML:

<ul>
 <li>
  <a href="dontleavethis.page">A link</a>
  <ul>
   <li><a href="navigate.there">A nested link</a></li>
   <li><a href="navigate.somewhere">Another nested link</a></li>
  </ul>
 </li>
</ul>

jQuery:

$('li:has(ul) a').click(function() { 
    bla bla bla...
    return false;
});

Thing is, no matter how I phrase my selector, I cannot stop the links in the nested <ul> from triggering the click handler. They clearly do not match the ":has(ul)" criteria of the selector but the handler still gets attached for some reason. What am I doing wrong here?

Many thanks in advance,

JS

Answer 1

$('ul > li:has(ul) > a').click(function(){
    bla bla bla....
    return false;
});

Answer 2

$('li:has(ul) > a').click(...)

Your problem is that $('li:has(ul) a') means all a elements inside the li that has the ul, not only immediate children.

Answer 3

If you give the top level links a class you can access them directly, without the need for any complex(ish) selector logic.

Answer 4

You should give the main ul an id, I'll use "main" but you should try and think of a more descriptive one (for your own benefit). Then you can just use

$('ul#main > li > a').click(function() { 
    bla bla bla...
    return false;
});

The > will select only the direct ancestor of an element.

-edit- never mind, this also means the li's without an ul in it will have the style. @idrumgood's solution is best.

Answer 5

could it be that the event is propagated?

how about

$('ul > li:has(ul) > a').click(function(event){
  bla bla bla....
  event.stopPropagation();
  return false;
});