jQuery Selector Magic

I’ve been working on a Drupal module to automatically make CSS-styled drop-down menus from the built-in menuing system. That’s been going great, and I’m really enjoying Drupal’s modular architecture and theming abilities. However, I ran into a little problem which was solved just perfectly by an elegant bit of jQuery Javascript.

What I wanted to do was to mark a list active if any of its children were active. That’s a common design request. “Make this tab active if the current page is one of that tab’s children.” However, I’d written the menu routines recursively, and it just isn’t worth it to me to rewrite them to add this one little feature.

Yay jQuery

Here’s the structure. An outer div with class “sssmenu”. Inner “ul” comprising the top level, whose “li” elements all have the class=”menutitle”. Child li may have the class “active”. Like so, only skipping the angle brackets.

[div class="sssmenu"]
    [ul]
        [li class="menutitle"]Tab 1
          [ul]
              [li]sub 1[/li]
              [li]sub 2[/li]
              [li]sub 3[/li]
          [/ul]
        [/li]
        [li class="menutitle"]Tab 2
          [ul]
              [li]sub 1[/li]
              [li class="active"]sub 2[/li]
              [li]sub 3[/li]
          [/ul]
        [/li]
     [/ul]
[/div]

Now, with one clean looking jQuery statement, I can make Tab 2 “active”.

$('.sssmenu li.menutitle[li.active]').addClass('active');

Basically, that says “For every li.menutitle child of .sssmenu, if that li has an li descendant with class “active”, add “active” to your class. Resulting in something like this:

[div class="sssmenu"]
    [ul]
        [li class="menutitle"]Tab 1
          [ul]
              [li]sub 1[/li]
              [li]sub 2[/li]
              [li]sub 3[/li]
          [/ul]
        [/li]
        [li class="menutitle active"]Tab 2
          [ul]
              [li]sub 1[/li]
              [li class="active"]sub 2[/li]
              [li]sub 3[/li]
          [/ul]
        [/li]
     [/ul]
[/div]

[tags]jquery,javascript,css,css selectors,dhtml[/tags]

Related posts:

1. Simple, degradable Flash embedding using jQuery Now that I am doing professional web layouts for clients,...
2. Semitransparent rollovers made easy with JQuery I'm continuing to enjoy working with jQuery....
3. Magic Removal Success! I'm pleased to report that the Django magic removal branch...
4. First use of the Django Magic Removal Last night I took a break from my most recent...
5. Django Magic Removal, this time for real Despite my earlier initial successes using the Django Magic-Removal Branch,...