Prev Next

jQuery Filtering

jQuery filtering methods allow you to refine your selection of elements based on certain conditions. Common methods include filter(), not(), and has(). These methods are essential for precise DOM manipulation.

Key Topics

Using filter()

The filter() method selects elements from the matched set that match the specified selector or function.

$("li").filter(".active");

Explanation: This code selects all <li> elements with the class active.

Using not()

The not() method removes elements that match the specified selector from the matched set.

$("li").not(".inactive");

Explanation: This code selects all <li> elements except those with the class inactive.

Using has()

The has() method selects elements that contain at least one element matching the specified selector.

$("div").has("p");

Explanation: This code selects all <div> elements that contain a <p> element.

Example: Filtering Methods


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Filtering Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li class="active">Item 1</li>
        <li class="inactive">Item 2</li>
        <li>Item 3</li>
    </ul>
    <div>
        <p>Paragraph inside div</p>
    </div>
    <div>Empty div</div>
    <button id="filterButton">Filter Active</button>
    <button id="notButton">Exclude Inactive</button>
    <button id="hasButton">Find Divs with Paragraphs</button>

    <script>
        $(document).ready(function() {
            $("#filterButton").click(function() {
                let filtered = $("li").filter(".active").map(function() {
                    return $(this).text();
                }).get();
                alert("Filtered: " + filtered.join(", "));
            });

            $("#notButton").click(function() {
                let notFiltered = $("li").not(".inactive").map(function() {
                    return $(this).text();
                }).get();
                alert("Not Filtered: " + notFiltered.join(", "));
            });

            $("#hasButton").click(function() {
                let hasFilter = $("div").has("p").length;
                alert("Divs with paragraphs: " + hasFilter);
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates filtering elements using filter(), not(), and has(). Buttons dynamically filter and display results.

Key Takeaways

  • Element Refinement: Use filter() to include only specific elements from a set.
  • Exclusions: Use not() to exclude elements that match a selector.
  • Containment Checks: Use has() to find elements containing specific descendants.
Prev Next