Tutorials


jQuery Filtering selectors


Filtering selectors in jQuery are used to refine and narrow down the set of elements selected by a given selector. These selectors allow you to apply specific conditions to filter elements, making it easier to target and manipulate elements based on their attributes, states, or positions within the DOM.

Types of Filtering Selectors

1.

Selects the first element in a set of matched elements.

$("div:first")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:first").css("color", "red");
        });
    </script>
</head>
<body>
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</body>
</html>

Explanation: Applies red color to the text of the first <div> element.

2.

Selects the last element in a set of matched elements.

$("div:last")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Last Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:last").css("color", "blue");
        });
    </script>
</head>
<body>
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</body>
</html>

Explanation: Applies blue color to the text of the last <div> element.

3.
(index)

Selects the element at the specified index (0-based).

$("div:eq(1)")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eq Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:eq(1)").css("color", "green");
        });
    </script>
</head>
<body>
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</body>
</html>

Explanation: Applies green color to the text of the <div> element at index 1.

4.
(index)

Selects elements with an index greater than the specified index.

$("div:gt(1)")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gt Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:gt(1)").css("color", "purple");
        });
    </script>
</head>
<body>
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</body>
</html>

Explanation: Applies purple color to the text of all <div> elements with an index greater than 1.

5.
(index)

Selects elements with an index less than the specified index.

$("div:lt(2)")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lt Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:lt(2)").css("color", "orange");
        });
    </script>
</head>
<body>
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</body>
</html>

Explanation: Applies orange color to the text of all <div> elements with an index less than 2.

6.
(selector)

Selects all elements that do not match the specified selector.

$("div:not(.exclude)")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Not Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:not(.exclude)").css("color", "pink");
        });
    </script>
</head>
<body>
    <div class="exclude">Excluded</div>
    <div>Included</div>
</body>
</html>

Explanation: Applies pink color to the text of all <div> elements that do not have the class exclude.

7.
(selector)

Selects elements that contain at least one element that matches the specified selector.

$("div:has(p)")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Has Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:has(p)").css("border", "2px solid red");
        });
    </script>
</head>
<body>
    <div>
        <p>Paragraph 1</p>
    </div>
    <div>
        <p>Paragraph 2</p>
    </div>
    <div>No Paragraph</div>
</body>
</html>

Explanation: Applies a red border to <div> elements that contain <p> elements.

8.

Selects elements that have at least one child element.

$("div:parent")

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Selector Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div:parent").css("background-color", "lightgray");
        });
    </script>
</head>
<body>
    <div>Parent 1
        <p>Child</p>
    </div>
    <div>Parent 2
        <p>Child</p>
    </div>
    <div>Parent 3</div>
</body>
</html>

Explanation: Applies a light gray background color to <div> elements that have at least one child element.

Use Cases

  • Dynamic Content: Filter and manage elements based on their position or relationship within the DOM.
  • UI Updates: Apply styles or handle events based on specific criteria, such as selected or non-selected elements.
  • Form Validation: Handle form elements and ensure that certain fields or controls meet specified conditions.

Performance Considerations

  • Efficiency: Filtering selectors are generally efficient, but in documents with many elements, they should be used thoughtfully to avoid performance issues.
  • Specificity: Use specific filtering selectors to avoid unnecessary computations and improve performance.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about