JQuery Filtering Functions

Until now we have seen ancestral selection, child selection and sibling selection in the previous articles on JQuery traversing. We can also filter JQuery elements based on a specific criteria. JQuery filtering functions allow us to select elements that match a particular criteria. JQuery filter functions comprise of first(), last() eq(), filter() and not(). Let’s have a look at each of them with the help of example.

The first(), last() and eq() functions

The first() function selects the first of all the selected elements. On the other hand, the last() function retrieves the last of all the selected elements. The eq() function takes the index of the selected element and returns the corresponding element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Filtering</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h3").first().css({"border": "1px solid yellow"});
         $("h3").last().css({"border": "1px solid green"});
         $("h3").eq("2").css({"border": "1px solid reds"});

         });
      </script>
    
</head>
    
<body>
    
    <div>
        <h3>This is first random h3 heading</h3>
        
           <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
        
        <h3> This is the second h3 heading.</h3>
        
        <h3> This is the h3 element with index2</h3>
        
        <h3> This is the last h3 element.</h3>
        
        
    </div>

</body>

</html>

Download Code Run Code

The above code contains 4 h3 tags.The first() function selects the first h3 tag and adds a yellow border to it. Similarly, last() function changes border color of last h3 element to greens. The eq() function takes the index of the element to select. This is zero based index which means that to select the third h3 element we have to pass 2 to the eq() function.

The filter() and not() functions

The filter() function selects the element based on the criteria specified as parameter to it. On the other hand, not() function is the reverse of the filter function. It leaves the elements specified in the parameters and returns the rest of them. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Filtering</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h3").filter('.second').css({"border": "1px solid yellow"});
        $("h3").not('.second').css({"border": "1px solid green"});
 

         });
      </script>
    
</head>
    
<body>
    
    <div>
        <h3>This is first random h3 heading</h3>
        
           <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
        
        <h3 class="second"> This is the second h3 heading.</h3>
        
        <h3> This is the h3 element with index2</h3>
        
        <h3> This is the last h3 element.</h3>
        
        
    </div>

</body>

</html>

Download Code Run Code

In the above JQuery script the filter() function selects h3 heading with class “second” and sets its background color to yellow. On the other hand, the not() function selects all the h3 elements other than those with class “second” and adds green border to them.

<<< JQuery Sibling FunctionsJQuery Ajax >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .