jQuery EQ, HasClass, Has, If, Map, Not, Slice Filter Example

jQuery provides a lot of selector function ( jQuery Contains, Has, Hidden, Visible, Child Selector Example ), it also provide a lot of filter function.  This article will tell you primary jQuery filter functions with examples.

jQuery provides below filter functions. You can use them to filter out the elements that returned use jQuery selector function.

1. eq(index_number).

eq(index_number) will return the html tag object which index value is index_number. The index start from 0.

2. hasClass(css_class_name).

Check whether current html element has used special css class name or not. If used then return true.

3. filter(expression).

Filter out html element list which match the expression value ( for example that use a css class ).

4. filter(function()).

Filter out html element list that match the function return value.

Below html code demo above jQuery filter functions.

eq-hasClass-filter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery EQ HasClass Filter Example</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // If user click div html tag.
            $("div").click(function () {
                // If user click div element which has redDiv css class.
                if($(this).hasClass('redDiv')) {
                    // Move red div to bottom.
                    $(this).animate({top:500});
                // If click blue div.
                }else if($(this).hasClass('blueDiv')) {
                    //Move blue div to left.
                    $(this).animate({left:10});
                // If click green div.
                }else if($(this).hasClass('greenDiv')) {
                    // Move green div to left and bottom.
                    $(this).animate({top:320});
                    $(this).animate({left:10});
                }
            });
        });
        
        $(function () {
            // When click the first button.
            $("button").eq(0).click(function () {
                // Filter out the red div by class redDiv and set it's width and height value to zoom in.
                $("div").filter(".redDiv").css("width", "80").css("height","80");
            });

            // When click the second button.
            $("button").eq(1).click(function () {
                // Get div object whose index value is 1, index value start from 0.
                // And set it's background color to yellow.
                $("div").eq(1).css("background", "yellow");
            });

            // When click the third button.
            $("button").eq(2).click(function () {
                // Get div object which contains one span tag. And set backgroud color to blue.
                $("div").filter(function (index) {
                    return $('span', this).length == 1;
                }).css("background", "blue");
            });

            // When click the fourth button.
            $("button").eq(3).click(function () {
                // Zoom out the red dive with original size.
                $("div").filter(".redDiv").css("width", "180").css("height","180");
            });
        });

    </script>

    <style type="text/css">

        /* Make div html element default size and position. */
        div{
            top:150px;
            width: 180px;
            height: 180px;
            position: absolute;
        }

        /* Define red div css class. */
        .redDiv{background: red;left: 10px; z-index: 1}

        /* Define blue div css class. */
        .blueDiv{background: blue; left: 200px;z-index: 2}

        /* Define green div css class. */
        .greenDiv{background: green;left: 390px; z-index: 3}

    </style>
</head>
<body>

<div class="redDiv"></div>

<div class="blueDiv"><label></label></div>

<div class="greenDiv"><span></span></div>

<button style="margin-top: 10px; font-size: 15px">Zoom In First Div</button>
<br/>

<button style="margin-top: 10px; font-size: 15px">Change Second Div Color To Yellow</button>
<br/>

<button style="margin-top: 10px; font-size: 15px">Change Third Div Color To Blue</button>
<br/>

<button style="margin-top: 10px; font-size: 15px">Zoom Out First Div Size</button>
<br/>

</body>
</html>

5. has(expression).

Get specified child elements, remove other child elements.

READ :   Difference Between Native Dom And jQuery Object

jquery has example

has.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Has If Example</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // Get p tag object which has child label html tag with green css class name.
            var greenLabel = $("p").has("label.green");
            if(greenLabel)
            {
                alert("There has green background label. ");
                greenLabel.css("background","green");
            }
        });

    </script>
</head>
<body>

<p><label>Java</label></p>
<p><label class="green">JavaScript</label></p>
<p>C++</p>

</body>
</html>

6. map(callback_function).

Cast element list object to array.

jquery map example

map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Map Example</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            
            var mapValue = $("p").map(function () {
               return $(this).innerText;
            });

            var length = mapValue.prevObject.length;

            var mapString = '';

            for(var i=0;i<length;i++)
            {
                mapString += mapValue.prevObject[i].innerText + ", ";
            }

            $("#total").append(mapString);
        });

    </script>
</head>
<body>

<p>Java</p>
<p>JavaScript</p>
<p>C++</p>

<div id="total">Coding Language : </div>

</body>
</html>

7. not(expression).

Return html tags which do not contain specified expression.

8. slice(start, end).

Return a sub set of html elements list. Do not include the end index element.

jquery not slice example

not-slice-html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Not Example</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Get all ul -> li list.
            var liList = $("#navigation li");

            // Remove li element that use .back css class.
            var notBackLiList = liList.not(".back");

            // Change the third li ( except back li ) text color to blue.
            notBackLiList.slice(2,3).css("color", "blue");

            // Change first li background color.
            $(".back").css("background", "yellow");
        });

    </script>
</head>
<body>

<ul id="navigation">
    <li class="back">Back</li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
    <li>Service</li>
</ul>

</body>
</html>
(Visited 14 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.