jQuery Introduction | Traversing Elements | Filtering Methods .first() .last() .eq() .filter() .not() .is()

Tags:

Filtering Methods

Methods for filtering selected elements in the DOM tree are as follows.

Method Description
.first() Selects the first element among the selected elements.
.last() Selects the last element among the selected elements.
.eq() Selects the element corresponding to the index passed as an argument among the selected elements.
.filter() Selects all selected elements that match the selector passed as an argument or for which the function call result is true.
.not() Selects all remaining elements except selected elements that match the selector passed as an argument or for which the function call result is true.
.has() Selects all selected elements that have an element matching the selector passed as an argument as a descendant.
.is() Returns true if at least one selected element matches the selector passed as an argument.
.map() Runs a callback function for each element in the selected element set and returns a jQuery object made from the returned values.
.slice() Selects only elements corresponding to the index range passed as an argument among the selected elements.

.first() and .last() Methods

The .first() method selects the first element among the selected elements, and the .last() method selects the last element.

$("li").first().css("background-color", "red");
$("li").last().css("background-color", "yellow");

Run code

In the example above, the CSS property of the first element is set to "red", and the CSS property of the last element is set to "yellow".

.eq() Method

The .eq() method selects the element corresponding to the index passed as an argument among the selected elements. Indexes are searched from the front, with the first selected element as index 0. If the index is negative, the last element in the selected element set is treated as index -1 and the search proceeds from the back.

$("li").eq(0).css("background-color", "red");
$("li").eq(-1).css("background-color", "yellow");

Run code

In the example above, the CSS property of the first element, whose index is 0, is set to "red", and the CSS property of the last element, whose index is -1, is set to "yellow".

.filter() Method

The .filter() method selects all selected elements that match the selector passed as an argument or for which the function call result is true.

This method can receive a selector, jQuery object, HTML DOM element, and more as an argument. It can also receive a function that can check each element in the element set.

$("li").filter(":odd") .css("background-color", "yellow");

Run code

In the example above, the :odd selector selects all elements whose index is odd, so the second and fourth elements are selected.

The important point is that jQuery indexes always start at 0. Therefore, when using selectors such as :odd or :even, remember that the index always starts at 0.

.not() Method

The .not() method selects all remaining elements except selected elements that match the selector passed as an argument or for which the function call result is true. In other words, it selects elements in exactly the opposite way from .filter().

$("li").not(":odd").css("background-color", "yellow");

Run code

In the example above, the :odd selector selects all elements whose index is odd, so the elements opposite to the second and fourth elements are selected.

.has() Method

The .has() method selects all selected elements that have an element matching the selector passed as an argument as a descendant.

$("li").has("b").css("background-color", "yellow");

Run code

The example above changes the CSS property only of selected <li> elements that have a <b> element as a descendant.

.is() Method

The .is() method returns true if at least one selected element matches the selector passed as an argument.

if ($("b").parents().is("ul")) {
  $("p").text("A <ul> element exists as an ancestor of the <b> element.");
}

Run code

In the example above, ancestor elements of the selected <b> element are first selected, and .is() checks whether a <ul> element exists among the selected ancestor elements.

.map() Method

The .map() method runs a specified callback function for each element in the selected element set and returns a jQuery object made from the returned values.

var val = $("li").map(function() {
  return $(this).html();
})
.get()   // Returns the returned values as an array.
.join(", "); // Returns all elements of the array as a string separated by commas.
$("p").html(val);

Run code

The example above runs a callback function that returns the HTML value of each selected <li> element. The values returned by the callback function are returned as an array through .get(), and then returned as a string through .join().

.slice() Method

The .slice() method selects only elements corresponding to the index range passed as an argument among the selected elements.

$("li").slice(2).css("background-color", "yellow");
$("li").slice(1, 3).css("border", "2px solid green");

Run code

In the example above, the first line changes the CSS property only of selected <li> elements whose index is equal to or greater than 2, and the second line changes the CSS property only of selected <li> elements whose index is equal to 1 or less than 3.

References