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

jQuery Web Development Front End Technology

Overview

jQuery is a fast, small, and feature-rich JavaScript library. It helps in DOM manipulation, event handling, animation, CSS and Ajax. To achieve the requirement we’ll use the “is(selector)” method of jQuery.

is(selector)

This method checks the currently selected elements against an expression/selector and returns true if any one of the selected elements matches with the selector.

In the below code, we have created a container with the class “test”. We want to change the background color of the container when it is clicked. So, “test” which is the class name of the container will be used as a selector and it’ll be checked when each container is clicked. If there’s a match then the background color of the container will be updated.

<div class="test">Let's learn!</div>
<div>Second Container</div>
<script>
$("div").on("click", function () {
   if ($(this).is(".test")) {
      $(this).css({
         background: "grey",
      });
   }
})
</script>

Here, we’ll create a basic HTML page, with some containers( div ) having different classes. We’ll add a script( <script>) tag, inside which we’ll create a function which will be triggered when any of the containers is clicked. It’ll check with the class name of the container and do the action respectively.

Example

<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
      <title>Document</title>
   </head>
   <body>
      <style>
         div {
            padding: 10px;
         }
      </style>
      <h3>
         Let's change the CSS of container w.r.t class using jQuery's is(selector) method.
      </h3>
      <div class="blue">Change the background to blue</div>
      <div class="green">Change the background to green</div>
      <div class="red">Change the background to red</div>
      <div class="blue">Change the background to blue</div>
      <div class="green">Change the background to green</div>
      <div class="red">Change the background to red</div>
      <!-- Script tag to embed jquery -->
      <script>
         $(document).ready(function () {
            $("div").on("click", function () {
               if ($(this).is(".blue")) {
                  $(this).css({
                     color: "white",
                     background: "blue",
                  });
               } else if ($(this).is(".green")) {
                  $(this).css({
                         color: "white",
                     background: "green",
                  });
               } else if ($(this).is(".red")) {
                  $(this).css({
                     color: "white",
                     background: "red",
                  });
               }
            });
         });
      </script>
   </body>
</html>

When the container of class “green”/”red”/”blue” is selected then the background color of the container will be changed to green/red/blue respectively.