jquery simplify statements

Question

Hi there,

Say I have the following, is there a way to chain them together, or simplify them in an way?

var initialTab = $('#navigation li#red');
initialTab.siblings().removeClass('on').find('ul').fadeOut(1000);
initialTab.addClass('on').find('ul').fadeIn(1000);

Thanks

Answer 1

You can chain it, like this:

$('#red').addClass('on').find('ul').fadeIn(1000)
   .end().siblings().removeClass('on').find('ul').fadeOut(1000);

An ID must be unique, so just #red will suffice here, and though .find() takes the chain the the <ul> descendants, .end() takes it back to the #red element so we can use .siblings() on that.

Answer 2

Why would you want to simplify those statements? They work on different elements and have different meanings. Chaining it further would make it harder both to understand and read.

But, if you really want to:

var initialTab = $('#navigation li#red');
initialTab.addClass('on').find('ul').fadeIn(1000).end()
   .siblings().removeClass('on').find('ul').fadeOut(1000);