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)