Is there a way to execute a jQuery chain branch only if the condition is true

Question

I'm probably about 7 or 8 at the level of professionalism with jQuery (on a scale of 1 to 10), so I'm not sure it even makes sense, but I would like to know if anyone knows about jQuery or maybe a plugin, which allows the jQuery branch to be executed only if this condition is true. Otherwise, I would like to hear if someone believes that this concept is incorrect ( EDIT and how wrong it is)

While it was possible to control the binding of various events using normal JavaScript syntax like this:

var desiredElement = $('.parent') // find the parent element .hover(overFunction,offFunction) // attach an event while I've got the parent in 'scope' .find('.child-element'); // then find and return the child if (booleanVar1) { // if one condition desiredElement.click(clickFunction1); // attach one event } else if (booleanVar2) { // or if a different condition desiredElement.click(clickFunction2); // attach a different event } else { // otherwise desiredElement.click(clickFunction3); // attach a default event } $('.parent').find('.other-child') // (or $('.parent .other-child') .css(SomePredefinedCssMapping) .hide() //... 

I was wondering if there is a way to do all this in jQuery or if there is a good reason not ... something like this:

 $('.parent') // find the parent element .hover({overFunction,offFunction}) // attach an event while I've got the parent in 'scope' .find('.child-element') // then find the child .when(booleanVar1) // if one condition .click(clickFunction1) // attach one event .orWhen(booleanVar2) // or if a different condition .click(clickFunction2) // attach a different event .orElse() // otherwise .click(clickFunction3) // attach a default event .end() .end() .find('.other-child') .css(SomePredefinedCssMapping) //... 

Note. I think this is syntactically correct, assuming booleans and functions are properly defined, but I'm sure I understood the intent clearly.

jQuery proposed seems a bit neat to me (??) agree / disagree? - so here are my questions:

• Is there any part of the built-in jQuery that basically already does this?
• Is there an extension that allows this type to be used?
• Is it harder than I think? (I think something like saving the current element if the condition is true, pressing an empty set of elements if the condition is false, and then pulling out the element set for each or condition will do this, like end() returns the previous set after calling find() )
• Is there something that makes it significantly less effective?

EDIT

The question asks how to do this using a chain of methods or why it would be impractical (especially preferred). Although he does not request alternatives, such alternatives may be needed to explain problems using the jQuery chaining. In addition, since the above example immediately evaluates the logical values, any other solution should do the same.

Answer 1

 $('.parent').hover(overFunction,offFunction) .find('.child-element') .click( booleanVar ? clickFunction1 : booleanVar2 ? clickFunction2 : clickFunction3 ) .end() .find('.other-child') .css(SomePredefinedCssMapping) 

Answer 2

Could you execute this conditional logic in your handler?

 var boolVar1 = true, boolVar2 = false; $(".foo").on("click", function(){ if ( boolVar1 ) clickFunction1(); if ( boolVar2 ) clickFunction2(); });