jQuery Lava Lamp Navigation Problem in WordPress

Question

Hi, I've implemented a lava lamp style navigation menu (from here) to work with my WordpPress blog's navigation menu. This function needs to select an id or class for the navigation menu link it is supposed to hover over. I set this up in the function's code to select <li class="current_page_item">, which is a class applied by WordPress to the navigation list element that corresponds to the page you're on.

The problem is that when you're on a post permalink page, category page, or on an older page, the lava lamp function doesn't work because none of the navigation list items have the current_page_item class since they're not pages that are reached by the navigation menu.

On these pages (any page not on the nav menu), I just want the slider to default to the "home" link.

The simplest solution I could think of would be to write a piece of javascript & jQuery that does the following before I run the lava lamp function: if no <li> has class="current_page_item", then addclass "current_page_item" to first <li> I just don't know enough JS or jQuery to write this.

Thanks.

Answer 1

You can't!

Nahhh just kidding, do it this way,

$(function(){
   var $menu = $('ul#menu');

   // look for <li class="current_page_item"> , .length would return greater than zero if there is matched element. 
   if (! $menu.find('.current_page_item').length ) {
      // add the class on the first child if no matched...
      $menu.children('li:first-child').addClass('current_page_item');
   }

});