Prev Next

jQuery Filters

jQuery filters are used to refine selections by narrowing down the set of matched elements. Filters such as :first, :last, :even, :odd, :eq(), and others help select specific elements in a group.

Key Topics

Basic Filters

Basic filters allow you to select elements based on common characteristics.

// Select the first element
$("li:first");

// Select the last element
$("li:last");

Explanation: :first and :last filters select the first and last element in a group, respectively.

Positional Filters

Positional filters provide more control by selecting elements based on their position.

// Select the even elements
$("li:even");

// Select the odd elements
$("li:odd");

// Select the element at a specific index
$("li:eq(2)");

Explanation: :even selects elements at even indices, :odd selects elements at odd indices, and :eq() selects the element at the specified index.

Example: Using Filters


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Filters Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <button id="firstButton">Highlight First</button>
    <button id="evenButton">Highlight Even</button>
    <button id="indexButton">Highlight Third</button>

    <script>
        $(document).ready(function() {
            $("#firstButton").click(function() {
                $("li").css("background-color", ""); // Reset
                $("li:first").css("background-color", "yellow");
            });

            $("#evenButton").click(function() {
                $("li").css("background-color", ""); // Reset
                $("li:even").css("background-color", "lightblue");
            });

            $("#indexButton").click(function() {
                $("li").css("background-color", ""); // Reset
                $("li:eq(2)").css("background-color", "lightgreen");
            });
        });
    </script>
</body>
</html>

Explanation: This example uses filters to highlight the first, even, or a specific item in a list. Buttons trigger the selection and styling dynamically.

Key Takeaways

  • Refined Selections: Use filters to narrow down DOM selections easily.
  • Positional Control: Positional filters allow precise selection of elements based on their index.
  • Dynamic Styling: Combine filters with styling methods for interactive applications.
Prev Next