js - shorten multiple conditions

Question

I have an if statement as below.

if($("#a").css("display") == "none" && $("#b").css("display") == "none" && $("#c").css("display") == "none" && $("#d").css("display")  == "none" && $("#e").css("display") == "none" && $("#f").css("display") == "none")

Is there anyway to shorten this line?

Answer 1

Sure, something like

if ( ! $('#a, #b, #c, #d, #e, #f').is(':visible') ) { .... }

returns true if all are hidden

Answer 2

You can put all the ids to be checked in an Array and then use Array.prototype.every function, like this

var ids = ["a", "b", "c", "d", "e", "f"];
if (ids.every(function(id){return $("#" + id).css("display") == "none";})){
   ...
}

Note: You can decide at runtime, which ids have to be checked, without modifying the condition.

Note 1: As @Jon Dvorak suggests, it was introduced in ES5 only. You can check whether it is compatible with your environment or not with this compat table