If else statement within Jquery function

Question

I have the following code in Javascript and Jquery:

     $("<li />")

     .html('Somehtml')

I would like to be able to change the content of .html by using 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('Somehtml')     
    else {
      .html('Other html')
      }

Any ideas how should I change it?

Answer 1

var listItem = $("#yourLi");

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

Answer 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

Answer 3

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.

Answer 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.

Answer 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');
}

Answer 6

what if we wanted an if, elseif, elseif etc...?