What is filter in jQuery

Matthias Schütz - Web design / web development / AngularJS / Photoshop / TYPO3


jQuery tutorial: selectors, filters and traversing

In the second part of my jQuery tutorial series, we deal with selectors, filters and DOM terms that are required for working with jQuery. As with my beginners tutorial, the online test environment JS Bin is recommended for experimenting with the JavaScript framework.
At the beginning of this workshop I want to clarify the terminology that affects the DOM structure. The terms are independent of jQuery and are intended to provide a better understanding of DOM elements.

  • English:
  • + parent (= ancestor)
  • + child (= descendant)
  • - child (= descendant)
  • - child (= descendant / sibling)
  • German:
  • + Parent (= ancestor)
  • + Child (= descendant)
  • - child (= descendant)
  • - child (= descendant / sibling)
  • Related to the DOM structure:
  • +
    (= ancestor)
  • + (= descendant of div)
  • -

    (= descendant of span)

  • - (= descendant of span / sibling of p)

A DOM element is therefore always related to other elements. Parents are automatically ancestors and child elements therefore always have a parent who is also the ancestor of the element. If the DOM structure is run through with the aid of a selector, one speaks of "traversing" - the process can be optimized using filters or specified DOM information. The speed of the selector engine of a framework is important for larger HTML documents. The performance of JavaScript operations at TaskSpeed ​​or Mozilla's Dromaeo can be measured and analyzed.

In order to be able to explain the different methods for selecting DOM elements step by step, I will apply all examples to the following HTML construct:

The code can simply be inserted into JS Bin in the "HTML" tab - to edit the source text, the text area must be activated with a double click. The existing elements in the area should be deleted. The editing mode is exited with the ESCAPE key. After selecting the jQuery library under "Include Library" in the top left corner, the "JavaScript" tab can be activated. The existing code there must also be removed. To determine the appearance of our HTML construct, we will now create all CSS properties with jQuery - the following code can be inserted into the "JavaScript" field of JS Bin (of course, everything can also be created offline in test files using an editor become):

I'll analyze the code in a moment. The complete HTML and JS code should then look something like this in JS Bin:

The finished output can now be viewed in the "Output" tab, which should correspond to the following figure.

Now back to our jQuery code: In the first line, two selectors are used for the general DOM elements and and are lined up with a comma:

The CSS function ".css ()" is used to define the various CSS attributes in the following lines. Since several properties are used here, curly brackets ({…}) and colons must be used in the CSS function. The commas that must appear at the end of a line are also important so that the function evaluates the following line - there must be no comma in the last line because it is the last statement. In direct comparison, the jQuery code only differs in a few places from the equivalent CSS code:

In addition to the double (optionally also single) quotation marks that must be used in jQuery when assigning values ​​and attributes, the code only differs from the commas or semicolons. The last line of our jQuery codes also colors all elements blue.

In jQuery there are now many possibilities to select DOM elements in a targeted manner. In addition to general HTML elements (,,, etc.), IDs (#id), classes (.class) and the star selector (*), hierarchical selectors are the simplest method of addressing interconnected or subordinate elements. The hierarchical functions include the following:

The first functionality (ancestor descendant) changes all descendants (subordinate elements) of a DOM element - this means that the descendants of nested elements are also addressed. All of the following jQuery snippets must be inserted at the end of the existing jQuery code so that the CSS modifications are applied last. Here again the HTML construct as a reminder:

The following line would color all child elements of the element with the class "level0":

The elements of the nested container with the class "level1" would also be affected. If you only want to modify the objects of the class "level1", the code has to be as follows:

Now the question arises, how one only changes the elements of the class "level0". For this purpose, the "child" selector (child) can be used, which only addresses the child elements of the first subordinate level of an element. The code for this:

The third possibility of the above-mentioned selector functions is the "sibling" function: Sibling elements are on the same level as the preceding target element. With the function that is called via the tilde (~), all objects are picked up after the defined DOM element. An example:

This means that all subsequent containers (and their contents) on the level of the object with the class "class" would be colored - the last element of the level, an element, would not be affected.
The last hierarchical selector would be the successor function (next), with which the following element of a specified DOM object can be changed:

This modifies all elements that directly follow a container and are on the same level: The object with the ID "level2", which is subordinate to the block with the class "level1", would not be affected. The following element must also directly follow the desired DOM element - if there is an element in between, the selector does not take effect.

In addition to the hierarchical functions, there are filters in jQuery through which elements can be specified even more precisely. A filter is appended to the target element with a colon. There are also attribute filters that are declared using square brackets ([…]). More on that later.
A complete list of all selectors can be found in the official jQuery documentation. For example, to access the first DOM object that occurs, the ": first" filter can be used:

Now the first element of the entire DOM structure would be colored. The ": first" filter can also be used in subordinate elements, so that the first element of another DOM element is addressed explicitly:

This line would have the same effect as "$ (" span: first ")", since the element with the ID "level2" is also the first occurring object in the container "level0". Selector functions and filters can now be combined - we have just combined the "ancestor descendant" selector with the ": first" filter. If we now use the "Child" selector instead, the first occurring element on the first subordinate level of the initially defined element (".level0") is addressed - the object with the ID "level2" is ignored because it is is already on the second sub-level. So the code for this would be:

In jQuery there are additional traversing functions such as ".parent ()", ".children ()" or ".siblings ()", which can be used as direct selection functions. Example:

The DOM modifications are carried out one after the other, which is why three colors are visible even though the surrounding block has been colored green.

Each object in the DOM structure is subordinate to a different element and therefore has an index number (array). The object with the class "level0" is located on the top level and is therefore the first element of the element - like in an array, the index numbers do not start with 1, but with 0. So if you want the third container that occurs the ": eq ()" filter (equals) must be used in conjunction with the index number "2".

The third element in the entire DOM structure would therefore be the object with the class "level1". The rules of inheritance also apply here - if you want to change subordinate elements of a DOM object, the parent element must be placed in front of the target element. Here is another example with the star selector:

The star selector simply checks every valid HTML element (as in CSS). This line selects the third element in the container with the class "level1": In this case the object with the class "class".

The global index numbers refer to the element, as HTML elements that are visible can only be displayed in this area. If the last element of the DOM structure with index number 7 is to be changed, this code would be incorrect:

Without a preceding parent element, the entire document () is understood as the origin: This includes all existing tags such as,, and so on. The code just mentioned would color the element green. In order to address the last DOM element of the container, the code must be as follows:

The last element of the container would then be colored. In jQuery, the index numbers are also used to apply alternating colors ("odd" and "even") to elements (e.g. tables or lists). However, as a developer you no longer have to worry about the numbers, as jQuery does the work:

The "even" setting is the odd rows, starting with the first row. The rows (not the index numbers) 3, 5, 7 and so on are selected continuously, while the rows 2, 4, 6, etc. are changed with the "odd" filter.

Finally, there is also an attribute filter in jQuery that should not be confused with the attribute function ".attr ()". The attribute filter can be used to select elements with certain attributes such as,, or. In the example, I deliberately provided an ID with an ID because we will now use this with the attribute filter:

This means that the entire DOM tree is searched for elements that have an ID. The attributes can also be preceded by an operator in order to be able to further specify the information. The "=" operator can be used to check an attribute for a certain value:

Now only the container with the class "level1" is colored - note the single quotation marks with which the value must be masked. Of course, filters can also be combined so that the following expressions are possible:

This selects the block whose class name contains the letter "k" and the content contains the text "2c".
That brings us to the end of this tutorial. As you can see, jQuery offers extensive possibilities to efficiently traverse the DOM structure of an HTML document.