MainelyDesign.com Blog

Jquery Direct Descendant Selector (using the >)

Posted on 11/17/2009 at 01:08 pm by Kevin Wentworth
Viewed 10,962 times | 0 comments

I'd been struggling with a very simple accordion menu script.  The problem was that I couldn't stop all of the links from returning false, when I only wanted to top link to return false.  Let me show you my code:

  1. $('div#sideNav li:has(ul) a').click(function() {
  2.     return false;
  3. });

What was going on (and correctly I might add) was all links contained in an li with a ul would return false, and wouldn't follow the link.  I wrote this convoluted function to parse out the href and change the window location:

  1. $('div#sideNav li ul li a').bind('click', function() {
  2.     window.location = $(this).attr('href');
  3. });

But I didn't like that either.  Too much code for something that should be easily controlled by Jquery.  Turns out, I hadn't been using the descendent selector: the '>' in the $() selector function. 

It's all about the > dummy!

When I changed my code just slightly, so only the direct descendent of the li:has(ul) > a would return false.  Perfect, only affecting the one a, not all the a's in the ul.

  1. $('div#sideNav li:has(ul) > a').click(function() {
  2.     return false;
  3. });

That's how I made my simple accoridion menu, turned bloated accordion menu, back into a simple accordion menu.

Bookmark and Share

Tags for Jquery Direct Descendant Selector (using the >)

Jquery | Usage | Example

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design