.is()
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)🡢 Boolean
selector
| Selector | A string containing a selector expression to match elements against. |
.is(function(indexInteger, elementElement))🡢 Boolean
function(indexInteger, elementElement)
| Function | A function used as a test for every element in the set. It accepts two arguments, index, which is the element's index in the jQuery collection, and element, which is the DOM element. Within the function, this refers to the current DOM element. |
.is(selection)🡢 Boolean
selection
| jQuery | An existing jQuery object to match the current set of elements against. |
.is(elements)🡢 Boolean
elements
| Element | One or more elements to match the current set of elements against. |
Unlike other filtering methods, .is() does not create a new jQuery object. Instead, it allows you to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.
Suppose you 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>
You 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) {
var target = $(event.target);
if (target.is("li")) {
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:
$("li").click(function () {
var li = $(this),
isWithTwo = li.is(function () {
return $("strong", this).length === 2;
});
if (isWithTwo) {
li.css("background-color", "green");
} else {
li.css("background-color", "red");
}
});
Shows a few ways is() can be used inside an event handler.
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br /><span>Peter</span></div>
<div class="blue"></div>
<p></p>
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;
}
$("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",
});
});
Returns true, because the parent of the input is a form element.
<form>
<input type="checkbox" />
</form>
<div></div>
div {
color: red;
}
var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
Returns false, because the parent of the input is a p element.
<form>
<p><input type="checkbox" /></p>
</form>
<div></div>
div {
color: red;
}
var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
li {
cursor: pointer;
}
var alt = $("#browsers li:nth-child(2n)").css("background", "#0ff");
$("li").click(function () {
var li = $(this);
if (li.is(alt)) {
li.slideUp();
} else {
li.css("background", "red");
}
});
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.
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
li {
cursor: pointer;
}
var alt = $("#browsers li:nth-child(2n)").css("background", "#0ff");
$("li").click(function () {
if (alt.is(this)) {
$(this).slideUp();
} else {
$(this).css("background", "red");
}
});