'If'-'else' statement within jQuery function

Question

I have the following code in JavaScript and jQuery:

     $("<li />")

     .html('Some HTML')

I would like to be able to change the content of .html by using an if-else statement. My code should be something like this, however it's not working.

var showinfo = <?php echo '$action'; ?>

$("<li />")

if (showinfo == 'action1'){
    .html('Some HTML')
else {
    .html('Other HTML')
}

How should I change it?

Solution 1

Ternary operator?

$("<li />").html((showinfo == 'action1') ? 'Somehtml' : 'Other html');

The important thing to understand is that your first bit of code is being interpreted as one statement, not two:

 $("<li />")
 .html('Somehtml')

 //Is the same as:
 $("<li />").html('Somehtml');

You're getting mixed up because you're not using semicolons to terminate your statements. JavaScript allows this to support legacy code, but if you're writing code now you really should be using them.

Solution 2

Don't interrupt the jquery chaining:

var showinfo = '<?php echo $action; ?>'

if (showinfo == 'action1'){
    $("<li />").html('Somehtml')     
} else {
    $("<li />").html('Other html')
}

Note: I also corrected an error in your php echo statement and a missing bracket in your if...else

Solution 3

var listItem = $("#yourLi");

if (showinfo == 'action1'){
 listItem.html('Somehtml')     
else {
  listItem.html('Other html')
  }

Solution 4

You can shorten it as follows:

var showinfo = '<?php echo '$action'; ?>'


$("<li />")
.html( (showinfo == 'action1' ? 'Somehtml' : 'Other html') );

.html can be on the same line or a separate line as the statement is terminated with a semicolon. If you have multiple methods on a single selector I find separating them on multiple lines more readable.

Solution 5

Adam's answer is pretty spot-on. To save a little bit of unnecessary duplication however you could modify it slightly to this:

var
    showinfo = '<?php echo $action; ?>',
    listitems = $("<li />");

if (showinfo == 'action1') {
    listitems.html('Somehtml');     
} else {
    listitems.html('Other html');
}

View more solutions

Comments

[Jim Schubert]

create a variable html, and assign your desired html to that variable in the if..else. Then, call the jQuery once: $("<li />").html(html);

[Adam Hopkinson]

+1 for being more elegant and explaining the answer better than me!

[thomasrutter]

Oooh I like this one too! Someone else not afraid of the ternary operator.

[thomasrutter]

Actually, ignore the above - I've just spotted ChrisP's answer which I like more - stackoverflow.com/questions/2489189/…

[dave1010]

If you don't need showinfo again, you can do: $("<li />").html( ('<?php echo '$action'; ?>' == 'action1' ? 'Somehtml' : 'Other html') );