.is()S2C Home « Filtering « .is()

Boolean Filter.

Description

The .is() method is used to compare the matched set against a specified selector, element, jQuery object or function and return true if any element matches the given arguments.

  • The .is() method does not create a new jQuery object like the other filtering methods do, but allows testing of a jQuery object without modifying the contents.

Syntax

Signature Description
.is( selector )Check the current matched set of elements against a selector.
.is( element )Check the current matched set of elements against an element.
.is( jQuery object )Check the current matched set of elements against a jQuery object.
.is( function(index) )Pass each element within the current matched set through a function.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
elementAn element to match elements against.Element
jQuery objectA jQuery object to match elements against.jQuery
function(index)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

A JavaScript Boolean object.

.is( selector ) ExampleTop

Check the current matched set of elements against a selector.

In the example below we select all 'td' elements within the table, iterate over the collection changing the background colour to olive. We break from the loop when we hit the 'td' element with the id of 'tdid1'.

Table For Testing The .is( selector ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 (id of tdid1) Table Row 2, Table Data 2 


$(function(){
  $('#btn8').on('click', function() {
    $('.testtable td').each(function (index, tableElement) { 
       $(this).css('backgroundColor', 'olive'); 
       if ($(this).is('#tdid1')) {
           return false;
       }
    });
  });
});

Press the button below to action the above code:


.is( element ) ExampleTop

Check the current matched set of elements against an element.

In the example below we select all 'i' elements within the main content, iterate over the collection changing the background colour to orange if the parent is a 'p' element.


$(function(){
  $('#btn9').on('click', function() {
    $('#main i').each(function (index, tableElement) { 
      if ($(this).parent().is('p')) {
          $(this).css('backgroundColor', 'orange'); 
      }
    });
  });
});

Press the button below to action the above code:


.is( jQuery object ) ExampleTop

Check the current matched set of elements against a jQuery object.

In the example below we select all even 'td' elements within the table with a class of 'testtable2' and save them to a jQuery object. We then iterate over all 'td' elements within the table changing the background colour to yellow if the 'td' element matches an element in our saved jQuery object and orange otherwise.

Table For Testing The .is( jQuery object ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


$(function(){
  $('#btn10').on('click', function() {
    var $evenCells = $('.testtable2 td:even'); 
    $('.testtable2 td').each(function (index, tableElement) {
      if ($(this).is( $evenCells )) {
          $(this).css('backgroundColor', 'yellow'); 
      } else {
          $(this).css('backgroundColor', 'orange'); 
      }
    });
  });
});

Press the button below to action the above code:


.is( function(index) ) ExampleTop

Pass each element within the current matched set through a function.

  • If the function returns true, the .is() method returns true as well.

In the example below when you click on a table cell below within the table with a class of 'testtable3' the background colour will change dependant upon that cell having a 'strong' element within it.

Table For Testing The .is( function(index) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


$(function(){
  $('.testtable3 td').click(function() {
    var $td = $(this),
      isStrong = $td.is(function() {
      return $('strong', this).length === 1;
    });
    
    if ( isStrong ) {
      $td.css("background-color", "yellow");
    } else {
      $td.css("background-color", "silver");
    }
  });
});