Jquery If/Else always evaluating to true

Question

Having a little trouble with an if/else seems to be always true

<a id="test" class="art-bottom detailvid" href="/redblank" target="_blank">Check-In Video</a>

$(document).ready(function() {      
    if ($('a[href="/blank"]')) {
       $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
    } else {
      $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
    }    
});

So, no matter what I make href it still show the first photo.

What is the issue?

Milind Anantwar · Accepted Answer · 2015-02-09 04:37:59Z

2

You should check for the length of returned object in if statement. you should also change the value of attr href used in if statement to "/redblank":

if ($('a[href="/redblank"]').length) {
   $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
} else {
  $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
}

Demo

edited Feb 9, 2015 at 4:37

answered Feb 9, 2015 at 4:18

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Comments

Husen · Accepted Answer · 2015-02-09 04:54:55Z

1

You can check the condition like this

if ($('a').attr('href') == "/blank") {
   $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/Kcn/MGE/KcnMGEd9i.png" height="28px" width="28px">' );
} else {
  $( "a" ).append( '<img src="http://www.clipartbest.com/cliparts/McL/L7p/McLL7pkKi.png" height="28px" width="28px">' );
}

edited Feb 9, 2015 at 4:54

Husen

9351 gold badge6 silver badges18 bronze badges

answered Feb 9, 2015 at 4:34

harry

1111 silver badge8 bronze badges

Comments

Dee · Accepted Answer · 2015-02-16 23:31:23Z

1

This is a common mistake. Instead of testing the presence of the element, you need to test the length, like so:

if ($('a[href="/blank"]').length) {...}

There are two concepts you need to be familiar with in order to understand why this works.

The first is how a jQuery wrapped set works. $('a'), for example:

When you select an element with jQuery, even if the element doesn't exist on the page, jQuery still creates the "container" (a pseudo-array) but it will be empty. This can be demonstrated by the following:

Open the console of your browser and type in var test = $('.doesNotExist')
Hit enter.
On the next line log out that variable by typing test and hitting enter again.

You will see:

[]

This is an empty jQuery wrapped set. The set exists but is empty. You can call the .length method on this pseudo-array just as you would on a regular array, and in this case, you will get 0.

test.length // returns 0

The second concept to understand is how truthy and falsy values work in if statements:

If you put a zero (0) or a null or an empty string ("") into an if statement, the if statement will reduce it down to a false. But if you put a regular string ("hello") or a number (22) or even an empty array ([]), the if statement will evaluate it to true.

if(undefined){...} will evaluate to false
if(""){...} will evaluate to false
if(2){...} will evaluate to true
if("hiya"){...} will evaluate to true
if([]){...} will evaluate to true

As you can see, if you place an empty jQuery set ([]) into an if statement, it is considered to be a truthy value and your if block will run.

The solution is to test the length of the jQuery set, which if empty, will result in zero (0), which is a falsy value.

edited Feb 16, 2015 at 23:31

answered Feb 9, 2015 at 4:42

Dee

365 bronze badges

3 Comments

not2technical Over a year ago

Thank you for the info. When length is zero when using if statement - will this get skipped not rendering at all?

Dee Over a year ago

Correct. The 0 (zero) will translate to a false and cause the if block to be skipped.

Dee Over a year ago

And we get the zero because the statement $('a[href="/blank"]').length evaluates to a zero, which evaluates to false

Collectives™ on Stack Overflow

Jquery If/Else always evaluating to true

3 Answers 3

Demo

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related