Question

jQuery – How do you say: are there any divs called x with the property display==block?

How do you taget specific divs with specific properties in Jquery?

Thanks…

and by “called x” I mean divs with a class name of x

Answer 1

Use the following code:

var DivsWithDisplayBlock = $("div.x").filter(function(){
    return $(this).css("display") == "block";
});

This defined variable is a JQuery object, containing references to all divs with display:block). For instance, if you were wondering how many divs have the display:block property, use: alert(DivsWithDisplayBlock.length).

Note: You said *all divs called x. I assumeed that you were talking about all DIVs with the .x class. Other possible ways to “call” your div:

• #id – ID. This should be uniquer, and occur only once. If you’ve defined multiple elements with ID x, I recommend to change id= to class=
• [name="x"] – Select by name.

EDIT (comment)
Changing attributes:

DivsWithDisplayBlock.css("display", "none");

The .css() method will add display:none to each element which is referenced by DivsWithDisplayBlock.

If you want to change multiple styles of the DIV.x elements, I recommend to use .toggleClass("x-visible", "x-invisible"). Define the style properties in the stylesheet (.x-visible, .x-invisible). When you execute the .toggleClass(..) method on the matched elements, the class names will swap.

Example:

 /* CSS*/
.x-invisible {display:none;}
.x-visible {display:block;}

/* JavaScript */
$(".x").toggleClass("x-invisible", "x-visible");