Using the jQuery is() Method to Evaluate Elements

The jQuery is() method provides a quick, boolean-based way to check if selected elements match a selector, element, or jQuery object. This guide covers how is() works, its fundamental syntax, and common real-world use cases such as verifying CSS classes, checking element visibility, evaluating form input states, and using callback functions for custom conditional logic.

Understanding the Syntax

The .is() method checks the current matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments. If no elements match, it returns false.

$(selector).is(matchingCriteria);

The matchingCriteria can be:

• A CSS selector string
• A jQuery object or DOM element
• A callback function that returns true or false

Unlike methods like .filter(), which return a new jQuery object containing the matched elements, .is() strictly returns a boolean value (true or false), making it ideal for if statements.

Checking for Classes and Attributes

You can determine whether an element contains a specific class or attribute without parsing the DOM tree manually.

if ($('#status-box').is('.active')) {
    console.log('The element has the "active" class.');
}

You can also check for multiple selectors at once. If the element matches any of the comma-separated classes, it returns true:

if ($('#status-box').is('.active, .highlighted')) {
    console.log('The element has either the active or highlighted class.');
}

Evaluating Element Visibility

A frequent use case for .is() is checking whether an element is currently hidden or visible on the page using jQuery pseudo-selectors:

// Check if an element is visible
if ($('#dropdown-menu').is(':visible')) {
    $('#dropdown-menu').hide();
} else {
    $('#dropdown-menu').show();
}

// Check if an element is hidden
if ($('#modal').is(':hidden')) {
    console.log('Modal is currently hidden.');
}

Checking Form Input States

Form inputs often require validation against states like :checked, :disabled, or :focus. The .is() method simplifies this evaluation:

// Check a checkbox or radio button
if ($('#terms-checkbox').is(':checked')) {
    $('#submit-button').prop('disabled', false);
}

// Check if an input field currently has focus
if ($('input[name="username"]').is(':focus')) {
    console.log('The user is typing in the username field.');
}

// Check if a field is disabled
if ($('#submit-button').is(':disabled')) {
    console.log('Button cannot be clicked.');
}

Comparing Elements

You can pass a DOM element or another jQuery object into .is() to see if two references point to the exact same DOM node:

$('li').on('click', function() {
    // Check if the clicked item is the first list item
    if ($(this).is(':first-child')) {
        console.log('First item clicked.');
    }

    // Compare directly against a specific DOM element
    var targetNode = document.getElementById('special-item');
    if ($(this).is(targetNode)) {
        console.log('Special item clicked.');
    }
});

Using a Function for Custom Evaluation

When standard selectors are not enough, pass a function into .is(). The function evaluates each element in the collection; this refers to the current DOM element.

var hasWideDiv = $('div').is(function(index) {
    return $(this).width() > 500;
});

if (hasWideDiv) {
    console.log('At least one div is wider than 500 pixels.');
}

If the function returns true for at least one element in the selection, the .is() method resolves to true.