Selecting DOM elements with jQuery: Filters – Part 2

This entry is part 2 of 5 in the series jQuery DOM Filters

We read about Basic and Content filters in the earlier post. The post covered filters to select DOM elements based on the position and content attributes. The filters can also be defined on the basis of the state and attributes and child-elements.

The elements can be selected with jQuery to perform various operations on them. So, continuing with the series, let’s take a look at the 3 other categories of filters for selecting the DOM elements:

  • Child Filters
  • Attribute Filters
  • Visibility Filters

Child Filters

The child filters work with the basic filters :odd(), :even() and :eq() to give more refined options for selection of elements. The filters options revolve around the 3 child filters:

  1. :first-child
  2. :last-child
  3. :nth-child()

The :nth-child() is parameterized filter and accepts the even/odd, index or equation. The child filter differ from basic filters (like :eq()) in the way the indexing starts. While all other filters start indexing from 0, the child filters start indexing from 1. The few scenarios are:

  1. Selecting all even paragraph elements with :nth-child() filter returns the even instances of paragraph elements. So, the result set will contain the even instances of paragraph like 2nd, 4th, 6th and so on.
 $("p:nth-child(even)"); 
  1. The :first-child and the :last-child are different from :first and :last filters because they can return multiple matching results. The :first-child filter can return multiple first-child elements for matching elements.
 //Selects last element of span contained in a paragraph

$("p span:last");

// Selects the last child of every span contained in a paragraph

$("p span:last-child"); 

Attribute Filters

The class, ID, href, title etc. are the attributes of an element. Attributes offer another way of selecting elements. The generalized syntax for matching the attribute is to enclose the attribute-value pair in square brackets.

[attribute=value]

[attribute!=value] // NOT matching attribute value

Let’s take an example of selecting all elements having class attribute set to refulzClass.

$( "[class=refulzClass]");

In addition, comma separated multiple attributes can be passed to $() in the same attribute-value combination. Not is an operator that can be used with attribute filters. Other important operators are:

  1. The attribute start with operator (^=) that selects the elements having the specified attribute and a value beginning exactly with a given string.
  2. The attribute ends with operator ($=) that selects the elements having the specified attribute and a value ending exactly with the given string.
  3. The attribute contains a word selector (~=) that selects the elements having a specified attribute and a value containing a given word, delimited by spaces.
  4. The attribute contains selector (*=) that selects the elements having a specified attribute and a value containing the given substring.

An Example of Attribute operators

//select all paragraph elements having class attribute beginning with refulz

$('p[class^="refulz"]') 

Visibility Filters

Not all HTML elements may be visible on the page all the time. The visibility filters select the elements based on their state of visibility. Based on the visible and hidden states, there are two visibility filters, i.e; :visible and :hidden.

The following statement selects all visible paragraph elements.

 $("p:visible"); 

Form Filters will be the last post of the series. Later, we will also have a look at custom filters.

Series Navigation<< A Glance at jQuery $() Wrapper & accessing DOM elements<< Selecting DOM elements with jQuery: Filters – Part 1