Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to perform a branch of jQuery chaining only if a condition is true

I'm probably about a 7 or 8 on proficiency with jQuery (on a scale of 1-10), so I'm not sure if this even makes sense, but I'd like to know if anyone knows of a jQuery function or possibly a plugin which allows a branch of jQuery to only be executed if a given condition is true. Otherwise, I'd love to hear if someone thinks the concept is flawed in some way (EDIT and how it is flawed)

While one could control attachment of various events using normal JavaScript syntax similar to 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 it all in jQuery or if there is a good reason not to... something perhaps 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 the booleans and functions are defined appropriately, but I'm pretty sure I've gotten the intent across pretty clearly

the proposed jQuery seems a little neater to me (??) agree/disagree? - so here are my questions:

  • Is there some part of native jQuery that basically already does this?
  • Is there an extension already out there that allows this type of thing?
  • Is it harder to do than I am thinking? (I'd think something like keeping the current element set if the condition is true, pushing an empty element set if condition is false, then popping the element set back out for each or condition would do it, just like the end() method pops back the previous set after a find() call)
  • Is there something that makes it significantly less efficient?

EDIT

The question asks how to do this with method chaining or why it would be unadvisable (specifics preferred). While it doesn't ask for alternatives, such alternatives might be necessary to explain problems with a jQuery chaining approach. Also, since the example above immediately evaluates the booleans, any other solution should do the same.

like image 558
Code Jockey Avatar asked Apr 26 '12 19:04

Code Jockey


People also ask

What is true about jQuery method chaining?

With jQuery, you can chain together actions/methods. Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

What is method chaining in jQuery provide an example what advantages does it offer?

The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code. This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method.

What is method chaining in jQuery with example?

jQuery | chaining() With jQuery, we can use do chaining which means to chain together multiple methods in a single statement on a single element. We have been using a single statement at once, but now using the chaining method we can bind multiple methods to make the code short.

What does it mean to run multiple jQuery methods within a single statement?

Chaining is a robust technique provided by jQuery which allows us to chain together actions or methods. With jQuery chaining, we can run multiple jQuery actions or methods on the same set of elements within a single line of the statement. This technique is really neat and saves developers from lengthy code structures.


2 Answers

$('.parent').hover(overFunction,offFunction)
    .find('.child-element')
    .click( booleanVar ? clickFunction1 :
            booleanVar2 ? clickFunction2 :
            clickFunction3 )
    .end()
    .find('.other-child')
    .css(SomePredefinedCssMapping)
like image 70
Esailija Avatar answered Oct 16 '22 02:10

Esailija


Couldn't you perform that conditional logic within your handler?

var boolVar1 = true,
    boolVar2 = false;

$(".foo").on("click", function(){
  if ( boolVar1 ) clickFunction1();
  if ( boolVar2 ) clickFunction2();
});
like image 39
Sampson Avatar answered Oct 16 '22 02:10

Sampson