jQuery not() and is() Methods

The not() method removes elements from a matched set that meet a condition. The is() method checks whether any element in a set matches a condition and returns true or false. Both methods help you write precise, conditional jQuery logic.

The not() Method

Think of not() as a filter that works in reverse. While filter() keeps what matches, not() keeps what does not match.

Syntax

$(selector).not(filterSelector)
$(selector).not(element)
$(selector).not(function(index) { return condition; })

Diagram: not() vs filter()

  $("li") matches: [Apple] [Banana] [Cherry] [Dates]
  .banana has class "exclude"

  .filter(".exclude")  → keeps only [Banana]
  .not(".exclude")     → keeps [Apple] [Cherry] [Dates]

Basic not() Examples

// Style all paragraphs except those with class "intro"
$("p").not(".intro").css("color", "grey");

// Select all inputs except the submit button
$("input").not("[type='submit']").css("background", "#fffde7");

// Select all list items except the first and last
$("li").not(":first").not(":last").css("text-indent", "10px");

not() with a Function

// Hide all table rows where the second cell value is below 50
$("tr").not(function() {
    return parseInt($(this).find("td:eq(1)").text()) >= 50;
}).css("background", "#ffcccc");

Practical: Disable All Buttons Except One

$(document).ready(function() {
    $("#submitBtn").click(function() {
        // Disable all buttons except this one
        $("button").not(this).prop("disabled", true);
    });
});

The is() Method

The is() method checks the matched set against a selector, element, or function. It returns true if at least one element in the set matches, and false otherwise. It does not change the selection — it only inspects it.

Syntax

$(selector).is(filterSelector)   // returns true or false

Basic is() Examples

$("p").is(".intro")         // true if any <p> has class "intro"
$("input").is(":checked")   // true if any input is checked
$("div").is(":visible")     // true if any div is visible
$("li").is(":first-child")  // true if any li is a first child

Diagram: is() Return Values

  HTML:
  <p class="intro">First</p>
  <p>Second</p>
  <p>Third</p>

  $("p").is(".intro")    → true  (first <p> has class intro)
  $("p").is(".summary")  → false (no <p> has class summary)

Using is() in Conditional Statements

$(document).ready(function() {
    $(".toggle-btn").click(function() {
        var panel = $(this).next(".panel");

        if (panel.is(":visible")) {
            panel.slideUp();
            $(this).text("Show Details");
        } else {
            panel.slideDown();
            $(this).text("Hide Details");
        }
    });
});

is() with :checked for Checkbox Logic

$(document).ready(function() {
    $("#agreeBox").change(function() {
        if ($(this).is(":checked")) {
            $("#proceedBtn").prop("disabled", false);
        } else {
            $("#proceedBtn").prop("disabled", true);
        }
    });
});

is() with DOM Element Comparison

// Check if a specific element is the one clicked
$("li").click(function() {
    if ($(this).is($("li:first"))) {
        alert("You clicked the first item!");
    }
});

is() with a Function

// Check if any paragraph has more than 100 characters
var hasLongText = $("p").is(function() {
    return $(this).text().length > 100;
});
console.log(hasLongText);  // true or false

not() vs is() — Key Difference

Combining not() and is()

$(document).ready(function() {
    $("input").each(function() {
        // Skip hidden fields and submit buttons
        if (!$(this).is("[type='hidden'], [type='submit']")) {
            $(this).css("background", "#f0f8ff");
        }
    });
});

Quick Summary

• not(selector) removes matching elements from the current set and returns the rest.
• is(selector) tests the set and returns true or false — does not change the set.
• Use not() when you want to act on "everything except" a group.
• Use is() inside if statements for conditional logic based on element state.
• Both accept selectors, elements, or functions as arguments.