I have about 13 ul li a items in a list and some have nested lists within them e.g. ul li ul li a and some don't. I want to prevent the default action on only a elements that have nested lists within them but not prevent default action for ones that don't. Here's an example of the markup...
- <ul id="mainmenu-nav">
- <li class="li-nav">
- <a href="#">Section with subs</a> <!--don't want these to follow-->
- <ul class="ul-nav">
- <li class="li-nav">
- <a href="#">Sub1</a>
- </li>
- <li class="li-nav">
- <a href="#">Sub2</a>
- </li>
- </ul>
- </li>
- <li class="li-nav">
- <a href="#">Section without subs</a> <!--DO want this link to follow-->
- </li>
- </ul>
As a workaround I have re-ordered the 'parent' ul li items so those with nested ul li a elements are at the bottom and used the following jQuery to prevent the default behaviour on the first 9 items:
- $('ul#mainmenu-nav > li > a').filter(':not(:first,:gt(8))').click(function(e) { e.preventDefault();
- });
However, instead, is there a way to tell jQuery to only apply this preventDefault to ul li a elements that have ul li a descendants/children (not sure of correct terminology here) so I can have the list items in any order?
I'm thinking there must be something to do with child selectors or something??