jQuery Filtering

jQuery Traversing: Filtering Selections

Often, after selecting a group of elements or traversing the DOM, you need to narrow down the selection further. jQuery provides several filtering methods for this purpose.

Basic Positional Filtering

These methods select elements based on their position within the matched set:

jQuery first() Method

Reduces the set of matched elements to only the first one in the set.

Example: Select the first list item (<li>) on the page.

$(function() {
  // Get all list items, then filter down to the very first one
  const firstItem = $("li").first();
  firstItem.css('font-weight', 'bold'); // Style the first item
});

jQuery last() Method

Reduces the set of matched elements to only the last one in the set.

Example: Select the last paragraph (<p>) inside a specific <div>.

$(function() {
  // Find paragraphs within #content, then filter to the last one
  const lastPara = $("div#content p").last();
  lastPara.css('font-style', 'italic'); // Style the last paragraph
});

jQuery eq() Method

Reduces the set of matched elements to the one at a specified index. Remember that indices are zero-based (the first element is index 0, the second is index 1, and so on).

Example: Select the second paragraph (<p>) on the page (index 1).

$(function() {
  // Get all paragraphs, then select the one at index 1
  const secondPara = $("p").eq(1);
  secondPara.css('color', 'blue'); // Style the second paragraph
});

Using a negative index with eq() counts backwards from the end of the set (e.g., eq(-1) is equivalent to last(), eq(-2) selects the second-to-last).

Content-Based Filtering

These methods filter elements based on whether they match certain criteria:

jQuery filter() Method

Reduces the set of matched elements to those that match the provided selector or pass the test in a provided function.

Example: From all paragraphs, select only those with the class MuiDialog-paper.

$(function() {
  // Get all paragraphs, then filter to keep only those with class ' MuiDialog-paper'
  const importantParas = $("p").filter(". MuiDialog-paper");
  importantParas.wrap("****"); // Wrap important paragraphs
});

Example using a function: Select images that have a width greater than 100px.

$(function() {
  const largeImages = $("img").filter(function() {
    // 'this' refers to the current img element in the iteration
    return $(this).width() > 100;
  });
  largeImages.css('border', '2px solid red');
});

jQuery not() Method

Removes elements from the set of matched elements. It’s the inverse of filter().

Example: From all list items, select those that do not have the class active.

$(function() {
  // Get all list items, then remove the one with class 'active'
  const inactiveItems = $("li").not(".active");
  inactiveItems.css('opacity', 0.5);
});

Like filter(), not() can also accept a function.

jQuery has() Method

Reduces the set of matched elements to those that have a descendant matching the selector.

Example: Select only the list items (<li>) that contain a <span> element.

$(function() {
  // Get all list items, then filter to keep only those containing a span
  const itemsWithSpan = $("li").has("span");
  itemsWithSpan.addClass('has-details');
});

jQuery Traversing Reference

For a complete overview of all jQuery Traversing and Filtering methods, please consult the official jQuery API documentation.