JQuery Traversing - Filtering in JQuery of JQuery

The most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.

Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.

example

<!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>internal</title>
        <script   src="https://code.jquery.com/jquery-3.4.1.min.js"   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="   crossorigin="anonymous"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $("#btn").click(function(){
                 
                    $(".class1").find(".teachers").children().first().css("background-color","red");
                    $(".class1").find(".teachers").children().last().css("background-color","yellow");
                    $(".class1").find(".office").children().eq(1).css("background-color","blue");
                    $(".class1").find(".office").children().filter(".staff").css("background-color","orange");
                    $(".class1").find(".office").children().not(".staff").css("background-color","grey");
                });
            });    
                
        </script>
        <div class="class1">
        <div>
            <ul class="teachers">
                <li>Sarathy</li>
                <li>Partha</li>
            </ul>
            <ul class="students">
                <li>Siva</li>
                <li>Ram</li>
            </ul>
            <ul class="office">
                <li>Kala</li>
                <li class="staff">JOhn</li>
                <li class="staff">Gopal</li>
            </ul>
            <button id="btn">click here</button>
        </div>
    </body>
</html>

Next Topics

Next lessons of current book.

JQuery - AJAX Introduction

JQuery of JQuery

JQuery - AJAX load() Method

JQuery of JQuery

Jquery post and get method

JQuery of JQuery

Format

JQuery of JQuery

Conflict

JQuery of JQuery