CODEWITHSUNDEEP
javascriptjquerychaining
frequent
frequent

Reputation: 28513

How to do a shorthand if-then in jQuery? Are these chainable?

Actually two questions:

I like the shorthand IF-ELSE in jQuery like so:

var some == true ? "it's true" : "it's false";

Is there a corresponding IF-THEN, because this:

   var some == true ? "it's true"

doesn't seem to work.

Also, would something like this be chainable in regular jQuery? Like so:

  some.addClass("hello")
      .find(".other").css("width","100px").end()
      // chained if
      .hasClass("one") ? some.css("border","1px solid red")
      .removeClass("hello")

Now that would be nice, wouldn't it? Is this possible?

Upvotes: 2

Views: 21474

Answers (3)

GillesC
GillesC

Reputation: 10874

That will do (assignment uses a single =, two is for conditions), but if the first one is true, like you posted, some will ALWAYS be true.

var some = true || "it's true";

And no, your example wouldn't be chainable, but you could replace your hasClass by filter('.one') which will continue the chain if there are elements containing the class one:

some.addClass("hello")
      .find(".other").css("width","100px").end()
      .filter('.one').css("border","1px solid red")
      .removeClass("hello")

Upvotes: 4

ipr101
ipr101

Reputation: 24236

There are a couple of plug-ins that allow you to chain if logic in jQuery -

http://outwestmedia.com/jquery-plugins/conditional/

$('div')
    .If('hasClass', 'myClass')
        .css('color', 'red')
    .Else('hasClass', 'anotherClass')
        .css('color', 'green')
    .Else()
        .css('color', 'blue');

http://benalman.com/projects/jquery-iff-plugin/

function my_test( x ) {
  return x === 'bar';
};

$('div')
  .append( '1' )
  .iff( my_test, 'foo' )
    .append( '2' )
    .end()
  .append( '3' );

Upvotes: 0

adeneo
adeneo

Reputation: 318302

The shorthand IF/ELSE you are reffering to is called a ternary operator, and it's not chainable in the same way as a IF/ELSE statements, nor is it chainable as a jQuery method, and there are some limits to it's use, you can however place one inside the other, like so:

some == true ? someMore == true ? "it's true" : "it's false" : "it's false";

You can also do:

some == true ? "it's true" : null;
//or
some == true ? "it's true" : undefined;

This returns something, so usually it's used like so:

var some = someVar==true ? "it's true" : "it's false";

In other words you can do:

var some = $(some).length ? 
             $(some).is('.one') ?
               some //some exists and have the class .one
             :
               return someOtherVar or function //some does not have the class .one
           :
             undefined //some does not have a length
           ;

You could also do something similar to this, and there are many different ways to use a ternary:

$(div)[somevar==true ? fadeIn : fadeOut](300);

Other than that, when having a lot of stuff to perform a if/else is usually more appropriate, and if doing a lot of if/else/elseif checking, a switch/case is probably better.

Upvotes: 4

Related Questions