jQuery Filtering

In jQuery, filtering allows you to refine your selection of elements by narrowing down the set of matched elements based on certain criteria.

1. Common jQuery Filtering Methods

Here are the most commonly used filtering methods:

Method	Description
`.filter(selector)`	Filters elements based on a selector, function, or element.
`.not(selector)`	Excludes elements that match the selector.
`.is(selector)`	Checks if any element in the set matches the selector (returns `true/false`).
`.has(selector)`	Filters elements that contain the specified descendant.
`.eq(index)`	Selects the element at the specified index (0-based).
`.first()`	Selects the first element in the set.
`.last()`	Selects the last element in the set.
`.slice(start, end)`	Selects a subset of elements based on start and end indices.

2. Examples

HTML Structure:

<ul id="list">
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
  <li>Item 5</li>
</ul>

Try It Now

jQuery Filtering Examples:

Filter Elements by Class:
```
$("li").filter(".active").css("color", "red");
```
Try It Now
This changes the text color of <li> elements with the class active to red.
Exclude Elements:
```
$("li").not(".active").css("color", "blue");
```
Try It Now
This changes the text color of <li> elements without the class active to blue.
Check if an Element Matches:
```
if ($("li").eq(1).is(".active")) {
  console.log("The second item is active.");
}
```
Try It Now
This checks if the second <li> has the class active.
Filter by Descendant:
```
$("ul").has(".active").css("border", "1px solid green");
```
Try It Now
This adds a green border to any <ul> that contains at least one element with the class active.
Select the First Element:
```
$("li").first().css("font-weight", "bold");
```
Try It Now
This makes the first <li> bold.
Select the Last Element:
```
$("li").last().css("font-style", "italic");
```
Try It Now
This italicizes the last <li>.
Select by Index:
```
$("li").eq(2).css("background-color", "yellow");
```
Try It Now
This highlights the third <li> (index 2) with a yellow background.
Select a Range of Elements:
```
$("li").slice(1, 4).css("text-decoration", "underline");
```
Try It Now
This underlines the second, third, and fourth <li> elements.

3. Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Filtering</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="list">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li class="active">Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    // Highlight active items
    $("li").filter(".active").css("color", "red");

    // Exclude active items
    $("li").not(".active").css("color", "blue");

    // Highlight the first item
    $("li").first().css("font-weight", "bold");

    // Highlight the last item
    $("li").last().css("font-style", "italic");

    // Highlight a range of items
    $("li").slice(1, 4).css("text-decoration", "underline");
  </script>
</body>
</html>

Try It Now

Key Points

Filtering refines a selection of elements.
Use .filter() to include specific elements and .not() to exclude them.
Methods like .first(), .last(), .eq(), and .slice() are useful for targeting elements by position.