if condition in jquery

Question

I am trying conditionally set the html content of an element, using the html method on the jquery object. I am not sure which is the right way to do it. Wether to use an if statement inside the html method call, or something else

For example I am trying to set different sizes on an image using jquery.

if(settings.imagesize =='1') {
// do something 
 }

So I tried to put it in the html method as a parameter

.html(if(settings.imagesize=='1') { '<img src="image1.png"/>' })

To give you context for the above code, here is what the complete structure looks like:

for (var i = 1; i <= 25; i++) {
    var clone = drop.clone()
        .appendTo('body')
        .css(direction, Math.random() * jQuery(window).width() - 20)
        .css('top', snowTop)
        .html(
    if (i == '21') {})
}

I am not sure what I am doing wrong, can someone please help me with it?

Thanks.

score 3 · Accepted Answer · answered Nov 22 '13 at 07:15

You cannot do an if statement inside a method call, not like that atleast.

You can do a ternary if, if you really must.

.html(settings.imagesize=='1' ? '<img src="image1.png"/>' : '');

But the most appropriate way is handling all the logic before the call...

var content;
if(settings.imagesize=='1') 
{ 
    content = '<img src="image1.png"/>';
}
something.html(content);

If you REALLY need an if inside the html call, you can do it as an immediate function.

.html((function(){
    if(settings.imagesize=='1'){
        return '<img src="image1.png"/>';
    }
    else{
        return '';
    }
})());

But then you are making your code hard to read...

Muhammad Raheel · Answer 2 · 2013-11-22T07:32:48.247

1

You need to do it like this

var content = ''
if(settings.imagesize =='1') {
    content = '<img src="image1.png"/>'
}

.html(content)

EDIT

You can use a ternary operator like this for clear code.

var content = (settings.imagesize =='1') ? '<img src="image1.png"/>' : ''

.html(content)

This is much more readable instead of inline calling of if condition in .html

edited Nov 22 '13 at 07:32

answered Nov 22 '13 at 07:15

Muhammad Raheel

19,442
6
62
98

score 1 · Answer 3 · answered Nov 22 '13 at 07:15

1

You can do this using Conditional Operator:

.html((settings.imagesize == '1') ? '<img src="image1.png"/>' : 'other html');

answered Nov 22 '13 at 07:15

palaѕн

64,836
15
100
121

score 1 · Answer 4 · answered Nov 22 '13 at 07:16

1

Not a silly question :)

This is how you can do this. Though I would not recommend doing such things. You can do such manipulation outside.

.html( settings.imagesize=='1'? '<img src="image1.png"/>' : '' );

answered Nov 22 '13 at 07:16

Rakesh Juyal

33,043
66
165
212

score 1 · Answer 5 · answered Nov 22 '13 at 07:16

1

You can try the ternary version of if

.html(i=='21' ? true : false)

answered Nov 22 '13 at 07:16

jasonscript

5,189
1
23
39

Gautam3164 · Answer 6 · 2013-11-22T07:26:01.850

1

You have only one option.Try with ternary operator

.html((settings.imagesize=='1') ? '<img src="image1.png"/>' : '' )

But better you use if condition for this better than the ternary.

edited Nov 22 '13 at 07:26

answered Nov 22 '13 at 07:17

Gautam3164

27,319
9
56
81

Is it possible to use the if condition inside html method ? – Vignesh Pichamani Nov 22 '13 at 07:20
@User no, it would cause a Syntax Error (I believe) – phatskat Nov 22 '13 at 07:22

phatskat · Answer 7 · 2013-11-22T07:26:20.650

For your longer example, the same logic as the other answers follows:

for (var i = 1; i <= 25; i++) {
    var content = '';

    if(i == 21)
        content = 'something';

    var clone = drop.clone()
        .appendTo('body')
        .css(direction, Math.random() * jQuery(window).width() - 20)
        .css('top', snowTop)
        .html(content);
}

It looks like you may have some confusion around ternary vs if - they're essentially the same with the ternary just being a single if/else statement in shorthand notation:

if(something)
    thenDoThis();
else
    doThat();

Is the same as

something ? thenDoThis() : doThat();

The difference here is that if is not allowed inside a method call, whereas ternary statements are fine:

console.log(if(something){ thenDoThis(); });
// SyntaxError: Unexpected token if

console.log(something ? thenDoThis() : doThat());
// works fine

banny · Answer 8 · 2013-11-22T12:35:35.373

1

can u check this

.html(i=='21' ? true : false)

edited Nov 22 '13 at 12:35

answered Nov 22 '13 at 07:21

banny

741
6
12

score 0 · Answer 9 · edited May 23 '17 at 12:05

First of all you can use the ternary operator:

.html((settings.imagesize=='1') ?'<img src="image1.png"/>' : '' )

But I think the better way is to call a function

.html(func(settings.imagesize));
function func(size){
     if(size === 1)
        return '<img src="image1.png"/>';
     return '';
}

or to use a self calling function:

.html(
(function func(size){
     if(size === 1)
        return '<img src="image1.png"/>';
     return '';
})(settings.imagesize));

if condition in jquery

9 Answers9