Learning jQuery

jQuery ".is()" is a filtering method which can be used to check the current element or set of element against a selector, elements, a jquery object or a function. It return true if there is at least one match from the given argument.

Let me put this in simple term with an example.

Suppose you have an unordered list with set of li elements. For example,

<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE</li>
<li>Safari</li>
</ul>

And you have assigned a different CSS based on the popularity of the browser. For example, the font size decreases as per the popularity of the browser. So the new HTML code looks like.

<ul>
<li class="Font22">Chrome<span></li>
<li class="Font18">Firefox</li>
<li class="Font14">IE</li>
<li class="Font10">Safari</li>
</ul>

And css classes are

.Font22{
    font-size:22pt;
}
.Font18{
    font-size:18pt;
}
.Font14{
    font-size:14pt;
}
.Font10{
    font-size:10pt;
}

Now what do you want to achieve is that when any of the li is clicked, you want to change the background color of the li and based on the clicked li, you want to display a message to the user.

Well, using the .is() method, we can easily check that which li is clicked. As I told earlier, .is() method can check the current element or set of element against a selector, elements, a jquery object or a function. So in below code, we are checking against the selector (css class).

$(function(){
    $("ul").click(function(event) {
     var $target = $(event.target);
     if ($target.is(".Font22")) {
         $target.css("background-color", "green");
         alert('Chrome is the most popular browser.');
     }
     if ($target.is(".Font18")) {
         $target.css("background-color", "orange");
         alert('Need to work harder to beat Chrome.');
     }
     if ($target.is(".Font14")) {
         $target.css("background-color", "Lightblue");
         alert('Microsoft is loosing the market in browser war.');
     }
     if ($target.is(".Font10")) {
         $target.css("background-color", "red");
         alert('Safari has great fetures but not used by many.');  
     }  
  });
});

So, I think now you have got the idea about what .is() method does. But there is an issue with .is() method. If you have clearly read first para of this post which says "It return true if there is at least one match from the given argument." So what is does is, it return true if one of the element is matched out of set of elements. To make it clear let's understand with an example.

In this example, we use the last example's HTML only but we want to set the yellow color to li element which has ".Font22" css class. So below is the jQuery code which finds all the li's and assign yellow color to li with ".Font22" css class.

$(function(){
     var target = $( "li" );
     if (target.is(".Font22")) {
         target.css("background-color", "yellow");
     }   
});

So you are hoping that only Chrome li will have the green background but your output will be:

Shocked? Well, nothing to feel weird. That's a behavior of .is() method. It return true if there is at least one match from the given argument. As one li has ".Font22" css class, so it will return true for all the "li" element. If you are working with single node then that is not a problem but with collection of nodes, you could face this issue.

The above problem can be easily solved by $("li.Font22") statement but my intention is to explain how .is() method works and not finding out what is the correct way.

You might be wondering why the first example was working. Well, the reason is the in first example the target was a single li element. The code line "var $target = $(event.target);", selects the clicked li element only.

Okay. So now the question is what are the uses of .is()?

I am going to tell you some of the basic, daily useful uses of .is() which I also use quite often.

• You can use it for checking classes, tag types etc.
• It can be also used with jQuery pseudo-selectors. For example, ".is(':hidden')" or ".is(':visible')".
• It can be also used to find out at least one checkbox must be checked out of checkbox list collection.

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

As explained earlier about the pratical uses of .is() method, In my opionion, .is() a very handy method.

Feel free to contact me for any help related to jQuery, I will gladly help you.