In this post, we will discuss how to use the jQuery is() method. This is an important filtering method used often in callback functions like event handlers.
jQuery is()
We use jQuery is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.
Here is the general syntax for using is();
filter could be string selector expression, function, elements or any existing jQuery object.
jQuery is() example
Following example demonstrates jQuery is() method usage.
<!doctype html>
<html>
<head>
<title>jQuery traversing is() example</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
border: 4px ;
background: green;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
.blue {
background: blue;
}
.red {
background: red;
}
.grey{
background: grey;
}
span {
color: white;
font-size: 16px;
}
p {
color: red;
font-weight: bolder;
background: yellow;
margin: 3px;
clear: left;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>Click on each div </h2>
<div id="sachin"><span>Sachin</span></div>
<div class="blue"><span>Ganguly</span></div>
<div><span>Dravid</span></div>
<div class="red">Srinath</div>
<div class="grey"><span>Kumble</span></div>
<div><span>Sanju</span></div>
<p> </p>
<script>
$( "div" ).on( "click", function() {
if ( $( this ).is( "#sachin" ) ) {
$( "p" ).text( "Best Batsman in the world" );
}
else if ( $( this ).is( ".blue" ) ) {
$( "p" ).text( "Best Captain Ever" );
}
else if ( $( this ).is( ":contains('Dravid')" ) ) {
$( "p" ).text( "The Wall" );
}
else if ( $( this ).is( ".red,.grey" ) ) {
$( "p" ).html( "Clicked on Srinath or Kumble : From Karnataka" );
}
else {
$( "p" ).html( "Young Talent" );
}
$( "p" ).hide().slideDown( "slow" );
$( this ).addClass("yellow");
});
</script>
</body>
</html>
In this example, you can see how is() method is used.
$( this ).is( "#sachin" ) : Here, is() method check if the selected element’s id="sachin".
$( this ).is( ".blue" ) : is() check if the selected element belongs to class="blue".
$( this ).is( ":contains('Dravid')" ) : Here is() checks whether the element contains a string “Dravid”.
$( this ).is( ".red,.grey" ) : This line of code checks whether the selected element belongs to class="red" or class="blue". The output will be same for Srinath and Kumble.
This will return true if it passes any of these conditions and display an output text with a sliding effect below the div elements. Otherwise executes the default condition. In our case, default condition executes when you click on Sanju
You can try passing function, jQuery object or any elements to the jQuery is() method.
You can try it yourself by clicking on any of the colored div elements below.
That’s all for now. We will discuss some more traversing techniques in the coming posts.