jQuery .is()

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.

Prior to jQuery 1.7, in selector strings with positional selectors such as :first, :gt(), or :even, the positional filtering is done against the jQuery object passed to .is(), not against the containing document. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns true, but $( "li:first-child" ).is( "li:last-child" ) returns false. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.

Starting with jQuery 1.7, selector strings with positional selectors apply the selector against the document, and then determine whether the first element of the current jQuery set matches any of the resulting elements. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns false. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.

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" );
 }
});