If statement with two jQuery selectors

Question

I'm trying to get an alert to appear if two conditions are met:

The value of the display property on the #playerbox element is block, AND
The value of the display property on the #playerinfo element is none

I have this:

if ($("#playerbox").css("display") == "block" && $("#playerinfo").css("display") == "none"){
    alert("test");
}

But the alert never appears. However, testing just one element will work:

if ($("#playerbox").css("display") == "block"){
    alert("test");
}

So I'm assuming I'm not chaining the two selectors together correctly in the if statement. What am I doing wrong?

UPDATE: I should have specified that #playerinfo is inside #playerbox. Does that change anything?

Have you also separately tested: $("#playerinfo").css("display") == 'none'? — PeeHaa
– PeeHaa, Commented Feb 22, 2012 at 21:10
Your code seems to work on its own: jsfiddle.net/s3Ze9 (click anywhere to test). Maybe you should alert or console.log the values before the if statement runs to see if you are getting what you expect? — Jasper
– Jasper, Commented Feb 22, 2012 at 21:13

ori · Accepted Answer · 2012-02-22 21:12:33Z

5

Why not use :visible and :hidden?

if ($("#playerbox:visible,#playerinfo:hidden").length == 2){
     ...
}

answered Feb 22, 2012 at 21:12

ori

7,8471 gold badge29 silver badges32 bronze badges

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

2 Comments

Jasper Over a year ago

It works, but so does the OP's code: jsfiddle.net/s3Ze9 (click anywhere to test)

daGUY Over a year ago

Turns out the problem was with something else in my script, but Ori's code is cleaner and shorter than mine anyway. I'll take it anyway :-)

AGoodDisplayName · Accepted Answer · 2012-02-22 21:13:55Z

3

Are you sure you JQuery actually found the elements you are looking for?

alert($("#playerbox").length);

alert($("#playerinfo").length);

if either of those are coming back as 0, then you aren't really getting those elements. Maybe you are have a typo, or the class name set rather than the id.

answered Feb 22, 2012 at 21:13

AGoodDisplayName

5,6638 gold badges39 silver badges50 bronze badges

1 Comment

Jasper Over a year ago

Good answer. If no element is selected then .css() will return undefined, for example: $('#doesnt-exist').css('display') will return undefined. And undefined == "none" will always resolve to false.

Johan · Accepted Answer · 2012-02-22 21:13:33Z

0

Use is

For example

 if($("#playerinfo").is(":hidden")) /* :visible for your other selector */
       //do stuff

answered Feb 22, 2012 at 21:13

Johan

35.4k62 gold badges191 silver badges309 bronze badges

1 Comment

Jasper Over a year ago

It works, but so does the OP's code: jsfiddle.net/s3Ze9 (click anywhere to test)

Collectives™ on Stack Overflow

If statement with two jQuery selectors

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related