jQuery if / else statements

There is no such thing as a jQuery if / else statement. Shocking, isn't it? You might be thinking something like: "There must be! In fact, I'm 99% sure there is!".

It doesn't exist. This is because jQuery is JavaScript. What you're looking for is a JavaScript if/else statement otherwise known as a JavaScript conditional statement.

Why I decided to write about jQuery if

This article exists because when I started out with jQuery, I looked everywhere for a 'jQuery if / else statement'. It blew my mind that something as important as an if statement didn't exist on the web. It took me a while to realize that I couldn't find it because I was looking in the wrong place. It was because of this giant journey problem I decided to write an article for anyone following a similar path.

looking for useful jQuery tutorials?

Before I go on, if you're looking for some pretty useful jQuery tutorials, have a look at

• How to create a jQuery Fading Navigation Menu
• How to create a jQuery Fading Border gallery with Opacity Focus
• How to create your own jQuery image slider

What is jQuery?

jQuery is a one of many javascript libraries. Very simply, these libraries are shortcuts created by people with crazy javascript skills for people like you and I. You could look at these libraries as one giant javascript plugin which make writing javascript 100 times more simple.

jQuery syntax is javascript, and therefore a lot of the things you do in jQuery are pretty much the same in plain ol' javascript. 'jQuery if statements' are written the same way as javascript if statements, since it IS javascript.

The basic syntax

if (condition) {
    // code to be executed if condition is true
} else {
    // code to be executed if condition is false
}

The JavaScript (jQuery) if / else statement is almost identical to the PHP if / else statement.

$a = 5;
$b = 10;

if($a > $b) {
	echo "<p>A is larger than B</p>";
}
elseif($a == $b) {
	echo "<p>A is equal to B</p>";
}
else {
	echo "<p>B is larger than A</p>";
}

And the JavaScript (jQuery) if / else version is:

var a = 5,
    b = 10;

if (a > b) {
    $("body").html("<p>A is larger than B</p>");
} else if (a == b) {
    $("body").html("<p>A is equal to B</p>");
} else {
    $("body").html("<p>B is larger than A</p>");
}

Note: The jQuery function html() is not equal to echo.

Explanation of another example if statement

HTML

<div id="example">
    <div></div>
    <div></div>
</div>

jQuery/javascript

$(document).ready(function() {
    var n = $("#example div").length;

    if (n < 2) {
        $("body").css("background", "green");
    } else {
        $("body").css("background", "orange");
    }
});

Very basically the above is saying: Count the amount of div's within the ID #example, and if it is less than 2, change the body's background colour to green, otherwise change the background colour to orange.

What do you think the outcome would be?

If you guessed orange... Then you would be right.

Javascript shorthand conditional statement

var n = $("#example div").length;
$("body").css("background", n < 2 ? "green" : "orange");

Now that is pretty handy! Creating a javascript if statement couldn't be more simple.

Conclusion

What is a 'jQuery if statement'? It is a 'JavaScript conditional statement' that happens to contain some jQuery.