How to checks the current selection against an expression using jQuery ?

How to checks the current selection against an expression using jQuery ?

Last Updated : 07 Mar, 2024

The task is to check the current selection against an expression using jQuery. jQuery is a lightweight and fast JavaScript that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.

jQuery is widely famous for its motto of “Write less, do more.” In simple words, by writing a few lines of code you can achieve your goal.

In jQuery, we can use the is(selector) method that checks the current selection against an expression and returns true if at least one element of the selection fits the given selector. Remember that if no element fits, or the selector is not valid, then the response will be 'false'.

Syntax:

element.is( selector )

selector: The expression to filter.

Example: In this example, we will use the is(selector) method.

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" 
            src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("li").click(function () {
                if ($(this).is(":first-child")) {
                    $("h2").text("This is list item 1");
                } else if ($(this).is(".middle0,.middle1")) {
                    $("h2").text("This is middle class list");
                } else if ($(this).is(":contains('item 5')")) {
                    $("h2").text("It's 5th list");
                } else if ($(this).is(":contains('item 6')")) {
                    $("h2").text("It's 6th list");
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <h1 style="color:green;text-align:center">
            GeeksforGeeks
        </h1>
        <span style="color:green;">
            Click any list item below:
        </span>
        <ul>
            <li class="top0">list item 1</li>
            <li class="top1">list item 2</li>
            <li class="middle0">list item 3</li>
            <li class="middle1">list item 4</li>
            <li class="bottom0">list item 5</li>
            <li class="bottom1">list item 6</li>
        </ul>
        <h2 style="color:green;
                   text-align:center;
                   background-color:lightgreen;">
            FILLER
        </h2>
    </div>
</body>
</html>

Output:

How to checks the current selection against an expression using jQuery ?

V

volumezero9786

Improve

Article Tags :

Similar Reads

How to detect and change the content/style of a div using jQuery ?

The changes to the html/text of a div can be detected using jQuery on() method. The on() is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The on() method is the replacement of the bind(), live() and delegate() method from the jQuery version 1

How to Disable Text Selection using jQuery?

In this article, we are going to learn how to disable text Selection using jQuery. Disabling text selection refers to preventing users from highlighting or selecting text content on a webpage. Text seÂlection is a common feature in numerous web applications. However, there might arise situations whe

How to check an element contains a class using jQuery?

Method 1: Using hasClass() method: The hasClass() is an inbuilt method in jQuery which check whether the elements with the specified class name exists or not. It returns a boolean value specifying whether the class exists in the element or not. This can be used to check for multiple classes. Syntax:

How to filter the children of any element using jQuery ?

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o

How to attach a method to HTML element event using jQuery ?

In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will