How to select all anchors with display block jquery

July 7, 2014 JS / jQuery, Snippets

Very often or not, you need to select all the elements from within the DOM, that have their display property set to “block”.

Solution

$('a').filter(function (index) {
    return $(this).css("display") === "block";
})

$('a').filter(function (index) {

return $(this).css("display") === "block";

})

Filter function from jQuery to the rescue.

Description: Reduce the set of matched elements to those that match the selector or pass the function’s test.

selector

Type: Selector

A string containing a selector expression to match the current set of elements against.

function(index)

Type: Function()

A function used as a test for each element in the set. this is the current DOM element.

element

Type: Element

An element to match the current set of elements against.

jQuery object

Type: Object

An existing jQuery object to match the current set of elements against.

The result of this next example is a red background for items that are even.

$( "li" ).filter( ":even" ).css( "background-color", "red" );

1	$( "li" ).filter( ":even" ).css( "background-color", "red" );