'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?

create a variable html, and assign your desired html to that variable in the if..else. Then, call the jQuery once: $("<li />").html(html); — Jim Schubert
– Jim Schubert, Commented Mar 21, 2010 at 23:25

Tobias Cohen · Accepted Answer · 2010-03-21 23:24:15Z

7

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.

answered Mar 21, 2010 at 23:24

Tobias Cohen

20k8 gold badges56 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Hopkinson Over a year ago

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

Adam Hopkinson · Accepted Answer · 2010-03-21 23:19:36Z

3

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

answered Mar 21, 2010 at 23:19

Adam Hopkinson

28.8k9 gold badges74 silver badges105 bronze badges

Comments

Ali Habibzadeh · Accepted Answer · 2010-03-21 23:18:10Z

2

var listItem = $("#yourLi");

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

answered Mar 21, 2010 at 23:18

Ali Habibzadeh

11.6k4 gold badges56 silver badges80 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:47:38Z

1

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

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Mar 22, 2010 at 2:29

thomasrutter

118k31 gold badges153 silver badges170 bronze badges

1 Comment

thomasrutter Over a year ago

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

thomasrutter · Accepted Answer · 2010-03-22 02:33:25Z

1

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.

edited Mar 22, 2010 at 2:33

thomasrutter

118k31 gold badges153 silver badges170 bronze badges

answered Mar 22, 2010 at 1:17

ChrisP

10.1k22 gold badges82 silver badges123 bronze badges

2 Comments

thomasrutter Over a year ago

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

dave1010 Over a year ago

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

Collectives™ on Stack Overflow

'If'-'else' statement within jQuery function

5 Answers 5

1 Comment

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related