jQuery IF Plugin

v 1.0.2

By Todd Northrop www.speednet.biz

This jQuery plugin adds conditional branching to jQuery matched set chaining.

How it Works

The IF plugin works by manipulating the jQuery matched set during the chained function call execution. It takes advantage of the fact that jQuery functions typically continue executing along the function chain, even if the matched set is empty that the function call does nothing.

When .IF() is executed and evaluates to false, the matched set is emptied, making subsequent function calls in the chain do nothing, and the original matched set is restored when the next .ELSE() or .ENDIF() is encountered.

The .ELSE() function takes an optional argument, making it possible to implement 'else if' functionality.  Here's an example of how it would be used.

$( "#myElement" )
   .IF( myVar == "yes" )
      .click( function () { alert( "Yes" ); } )
   .ELSE( myVar == "maybe" )
      .click( function () { alert( "Maybe" ); } )
   .ELSE()
      .click( function () { alert( "No" ); } )
   .ENDIF();

Of course, this may not be the best example from a coding logic standpoint, but at least provides a clear illustration of the usage, making the conditional branching easily recognizable. It also provides a good example of how the JavaScript code can be indented to provide legibility.

Also, in this example it was not necessary to use .ENDIF() because there were no more chained functions to be executed after it. But the use of .ENDIF() is always recommended for clarity, and it has very low overhead so it does not hurt from a performance perspective.

Arguments

The .IF() and .ELSE() functions can take pretty much any type of argument to evaluate, and the normal JavaScript "truthy/falsey" rules apply to determine if the subsequent chained function calls will be executed on the original matched set.

The only except is if a function is passed for the argument. In that case, the function is executed, with the matched set assigned as the context (the value of 'this'), and the function's return value is used to determine if the .IF()/.ELSE() succeeds or fails. The second set of demonstrations below highlights this technique.

Naming Conventions

I wish I could have used the lower-cased .if(), .else() and .endif(), but unfortunately JavaScript does not allow a dot-notation version of a reserved word. Interestingly, it does accept an array-indexed version of a reserved word, like: $("#myElement")['if']( ... ).css( ... )...etc. But I think a few jQuery developers might be slightly put-off by that syntax.

I arrived at using an upper-cased version of 'if' after looking at dozens of alternatives, and disliking them all for various reasons. As a rule, I don't like to break with standard naming conventions.

On the plus side, even though all-caps does not match with the camelCase naming standards in jQuery, I don't think there is any standard that prohibits its use either.

Also, by making .IF(), .ELSE(), and .ENDIF() upper-case, the branching logic becomes quite visible and clear when examining code.

Demos

The demonstration below sets the various paragraphs' text.  A yellow background is set if the test executed as expected, and a red background would indicate that the feature failed. A blue border is set around the paragraph after the final .ENDIF() to ensure that the conditional branching structure properly resolves at the end.

The features of the plugin tested here include:

• Simple .IF() execution
• Simple .ELSE() execution
• .ELSE() with a condition ('else if')
• Nested .IF()
• Nested .ELSE()
• Nested .ELSE() with a condition

The demonstrations are first carried out one-by-one with simple expressions passed to .IF()/.ELSE(), and then in the second section they are carried out by passing an evaluation function.

Demonstrations 1: Simple expressions

Demonstrations 2: Function callback expressions