jQuery .is() Method

What You’ll Learn

The .is() traversing method tests the current jQuery collection and returns true or false — it does not create a new jQuery object. This tutorial covers the official event-target list demo, callback tests for content, div click selector checks, form parent validation, and compares .is() with .filter().

Introduction

Most jQuery traversing methods return a new jQuery object — .filter(), .find(), .first(). Sometimes you only need a yes-or-no answer: Is this element a list item? Is its parent a form? Does it match this saved collection? The .is() method answers those questions with a boolean.

Available since jQuery 1.0 for selectors (callback, jQuery object, and DOM element forms since 1.6), .is() checks the current matched set without modifying it. It returns true if at least one element matches; otherwise false. This makes it ideal inside if statements and event handlers.

Understanding the .is() Method

Given a jQuery object representing a set of DOM elements, .is(selectorOrFunctionOrElement) tests whether any element in that set matches. The return type is a plain JavaScript boolean — not a jQuery wrapper.

In event handlers, $(event.target).is("li") checks whether the actual clicked node is an li, ignoring bubbled clicks from nested span or strong children. That pattern prevents accidental triggers when users click text inside a list item.

📝 Syntax

General forms of .is:

.is( selector )
.is( function( index, element ) { return trueOrFalse; } )
.is( jQueryObject )
.is( domElement )

Parameters

• selector (since 1.0) — a string containing a selector expression tested against each element in the current set.
• function (since 1.6) — a callback returning true if the element matches; receives index and DOM element; this is the current element.
• jQuery object (since 1.6) — returns true if any element in the current set appears in the provided collection.
• DOM element (since 1.6) — returns true if any element in the current set is the same node as the argument.

Return value

• true if at least one matched element satisfies the test; false otherwise (including when the set is empty).

Official jQuery API event-target example

$( "ul" ).on( "click", function ( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "ul" ).on( "click", function ( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});

Click li directly → red background
Click strong/span inside li → no change (target is not li)

$( "li" ).on( "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" );
  }
});

Item with two strong → green on click
Item with one strong → red on click

$( "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" ).text( "It's nothing special." );
  }
  $( "p" ).show();
});

First div → "It's the first div."
Blue/red div → "It's a blue or red div."
Peter div → "It's Peter!"

var inForm = $( "#in-form input" ).parent().is( "form" );
var inPara = $( "#in-para input" ).parent().is( "form" );

// inForm → true | inPara → false

Checkbox in form → isFormParent = true
Checkbox in p → isFormParent = false

var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).on( "click", function () {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});

Cyan alternating items (Safari, Opera) → slideUp
Other items → red background

🚀 Common Use Cases

• Event target guards — if ($(e.target).is("button")) { ... }.
• Form field context — $("input").parent().is("form").
• Toggle visibility logic — if ($panel.is(":visible")) { ... }.
• Custom element rules — callback to test attributes, child count, or state.
• Compare to cached set — $(this).is(selectedItems).
• Early return in handlers — skip processing when !$(el).is(".enabled").

📝 Notes

• Available since jQuery 1.0 (selector); function, jQuery object, and DOM forms since 1.6.
• Returns a boolean — not chainable for further jQuery methods on the result.
• Does not modify the jQuery object — unlike .filter(), .has(), and .find().
• True if at least one element in the set matches — not all elements required.
• Empty collection always yields false.
• Ideal inside event handlers, conditionals, and validation checks.

💡 Best Practices