Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at The Plaza Hotel 2012 (New York City) with:

jQuery's is() Method Checks For Any Matching Elements

By Ben Nadel on

This is a really tiny post, but just something that I wanted to point out. The is() method in jQuery will return true if any of the elements in the current collection match any of the elements in the is-based collection (as defined by the given selector). Normally, if you're working with just a single element, there's no problem; but, if your current jQuery collection contains multiple elements, you might get an unintended result.

Take a look at this quick example:

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <title>jQuery is() Method</title>
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  • $(function(){
  •  
  • // Get all the paragraphs.
  • var p = $( "p" );
  •  
  • // Check to see if the Paragraph is cool.
  • if (p.is( ".cool" )){
  •  
  • // Highlight with gold.
  • p.css( "background-color", "gold" );
  •  
  • }
  •  
  • });
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • jQuery is() Method
  • </h1>
  •  
  • <p class="cool">
  • I am a cool paragraph.
  • </p>
  •  
  • <p class="boring">
  • I am a boring paragraph.
  • </p>
  •  
  • <p class="cool">
  • I am a cool paragraph.
  • </p>
  •  
  • </body>
  • </html>

Here, we are grabbing all of the paragraphs on the page, then we are checking to see if the collection is( ".cool" ). If so, then we are going to give it a gold background. When we run this code, this is what we end up with:

 
 
 
 
 
 
jQuery is() Method Returns true If Any Elements Match The Given Set. 
 
 
 

As you can see, all paragraphs, even the one with the class "boring" were given the gold background. This is because at least one element in the original collection matched at least one element in the is-based collection. Like I said, if you are working with a single node, then it's never a problem; but, if your original collection has several nodes, your is() method calls might give you a false positive.

That said, if you haven't used jQuery's is() method, it is totally awesome! I love it for checking classes, visibility, and tag types. Perhaps the coolest use-cases for me is using it in conjunction with the jQuery pseudo-selectors:

  • if (elements.is( ":visible" )){ ... }

I love that one - I use it all the time in dynamic layouts.



Reader Comments

Ben, great post as usual. The is() method is also great for performance tricks.

Like maybe for a grid use case:

$("#somegrid").click(function(e){
if( $(e.target).is(".datarow") ){
// do something with this table row
}
});

So now instead of registering 50 or so table rows into the browser event model, you are only registering 1 element, and letting event delegation figure out the click.

Reply to this Comment

For that example wouldnt you do:

var p = $('p');

p.filter('.cool').css( 'background-color', 'gold' );

Because by doing:

if (p.is('.cool')) {
p.css( 'background-color', 'gold' );
}

You only check to see if there is some '.cool' p's available and so when you do this line:
p.css( 'background-color', 'gold' );

You are effectively applying the background to the 'p' set, rather than a filtered set.

That would be correct I suppose if you wanted to apply the gold background if there are any p's in the set with a class of cool.

Reply to this Comment

@shuns,

That is correct. The right/wrongness of the post wasn't so much what I was getting at. After all, I could simply do $( "p.cool" ) and have the exact set I was looking for; my real intention was only to point out that is() works with *any* overlap of the two sets and cannot speak for the entire collection, which may or may not lead to unintended results (depending on what you're doing).

Reply to this Comment

I just started using .is(':hidden') and .is(':visible') the other day.

Great explanation of what it actually does. Very helpful.

Keep it up.

Reply to this Comment

My condution is "Only submit if at least one checkbox was checked."

In this state, i can use is() method.

$("#myform").submit(function(){
var chckbox = $('input[type="checkbox"]')
if(chckbox.is(":checked")){
return true;
}
else {
return false;
}
});

Like you said, This is a really tiny post, but useful...

Reply to this Comment

It was a very nice idea! Just wanna say thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader. Thanks again.

Reply to this Comment

Great post. Just now saw the .is method on 24ways.org and didn't know it. Tried finding it in the Jquery api reference but it's nowhere to be found. This post really helped me out. Thanx.

Should anyone find the doc page on the jquery site please post it here.

Reply to this Comment

LOL just found it:

docs.jquery.com/Traversing

Hope somebody finds this helpfull

Reply to this Comment

Hi Ben... i always read your blog, and specially this post has solved a problem i had that was gettin me nuts!

Thanks a lot and keep the good work.

Greets from Chile, South America.

Rod.

Reply to this Comment

@Rodrigo, @Ryan, @Huile, @Ed,

Glad you guys enjoyed the post. $().is() is such a hugely useful method!

Reply to this Comment

Been away for a while Ben :)

Keep a lookout for the new 24 ways 2010 edition on 24ways.org

Reply to this Comment

well, this isn't very helpful because you never mention the solution to working with more than one element, you just say that .is() isn't good for multiple elements, but you don't explain what would get us the result with multiple elements.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.