- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check the current selection against an expression using jQuery?
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.
Description
When nothing is selected.
When the container of class “green” is selected
When the container of class “red” is selected
When all containers are selected
232 Views
