Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery .is() method

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 61
    Comment on it

    Hello Readers,


    In this blog we will discuss how to use the jQuery .is() method. Jquery .is() method is an important filtering method used generally in callback functions like event handlers.


    If there no element fits, or the selector is not become valid, then the response will be 'false'.


    Syntax: element.is( selector )
    


    Parameter- selector: The expression with which to filter.


    Here following is an examples showing a simple usage of jQuery .is() method


    Example:1

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $( "ul" ).click(function( event ) {
            var target = $( event.target );
            if ( target.is( "li" ) ) {
                target.css( "background-color", "red" );
            }
        });
    });
    </script>
    </head>
    <body>
    <ul>
        <li>list <strong>item 1</strong></li>
        <li><span>list item 2</span></li>
        <li>list item 3</li>
    </ul>
    </body>
    </html>
    


    Example:2

    <html>
    <head>
    <title>The jQuery Example .is() method</title>
    <script type = "text/javascript" 
    src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript" language = "javascript">
    $(document).ready(function() {
        $("#isMethod li").click(function () {
            if ($(this).is(":first-child")) {
                $("p").text("This is list item 1");
            } else if ($(this).is(".middle-0,.middle-1")) {
                $("p").text("This is middle class list");
            } else if ($(this).is(":contains('item 5')")) {
                $("p").text("It's 5th list");
            } 
        });
    });
    </script>
    
    <style type="text/css">
    .selected { color:red; }
    </style>
    </head>
    
    <body>
    <div>
        <span>Click any list item:</span>
        <ul id="isMethod">
            <li class="top-0">list item 1</li>
            <li class="top-1">list item 2</li>
            <li class="middle-0">list item 3</li>
            <li class="middle-1">list item 4</li>
            <li class="bottom-0">list item 5</li>
            <li class="bottom-1">list item 6</li>
        </ul>
        <p>FILLER</p>
    </div>
    </body>
    </html>
    


    Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: