Categories: Traversing jQuery > Filtering
Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
.is( selector )
version added: 1.0
selector
A string containing a selector expression to match elements against.
.is( function(index) )
version added: 1.6
function(index)
A function used as a test for the set of elements. It accepts one argument, index, which is the element's index in the jQuery collection.Within the function, this refers to the current DOM element.
.is( jQuery object )
version added: 1.6
jQuery object
An existing jQuery object to match the current set of elements against.
.is( element )
version added: 1.6
element
An element to match the current set of elements against.
Unlike the other filtering and traversal methods, .is() does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.
Suppose we have a list, with two of its items containing a child element:
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
We can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:
$('ul').click(function(event) {
if ($(event.target).is('li') ) {
$(event.target).css('background-color', 'red');
}
});
Now, when the user clicks on the word list in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <strong> or <span>, respectively.
Using a Function
The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns true, .is() returns true as well. For example, given a somewhat more involved HTML snippet:
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
You can attach a click handler to every <li> that evaluates the number of <strong> elements within the clicked <li> at that time like so:
Examples
Example 1
Shows a few ways is() can be used inside an event handler.
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
Example 1 - Full source:
Shows a few ways is() can be used inside an event handler.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:4px outset; background:green; text-align:center;
font-weight:bolder; cursor:pointer; }
.blue { background:blue; }
.red { background:red; }
span { color:white; font-size:16px; }
p { color:red; font-weight:bolder; background:yellow;
margin:3px; clear:left; display:none; }
</style>
</head>
<body>
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p> </p>
</body>
</html>
Example 2
Returns true, because the parent of the input is a form elementExample 2 - Full source:
Returns true, because the parent of the input is a form element<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var isFormParent = $("input[type='checkbox']").parent().is("form")
$("div").text("isFormParent = " + isFormParent);
});
</script>
<style>div { color:red; }</style>
</head>
<body>
<form><input type="checkbox" /></form>
<div></div>
</body>
</html>
Example 3
Returns false, because the parent of the input is a p elementExample 3 - Full source:
Returns false, because the parent of the input is ap element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var isFormParent = $("input[type='checkbox']").parent().is("form")
$("div").text("isFormParent = " + isFormParent);
});
</script>
<style>div { color:red; }</style>
</head>
<body>
<form><p><input type="checkbox" /></p></form>
<div></div>
</body>
</html>
Example 4
Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
<script>
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function() {
var $li = $(this);
if ( $li.is( $alt ) ) {
$li.slideUp();
} else {
$li.css("background", "red");
}
});
</script>
</body>
</html>Example 5
An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
<script>
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function() {
if ( $alt.is( this ) ) {
$(this).slideUp();
} else {
$(this).css("background", "red");
}
});
</script>
</body>
</html>Was this information helpful?
