Query - Logical Operators API reference for Query logical operator methods filter API Reference
Categories

Query - Logical Operators

Logical operator methods in Query allow you to perform checks and filtering operations on sets of elements.

is

Checks the current matched set of elements against a selector, element, or Query object and returns true if at least one of these elements matches the given arguments.

Syntax

$('selector').is(selector)

Parameters

NameTypeDescription
selectorString or FunctionA string containing a selector expression to match elements against or a function to test each element

Returns

boolean - true if at least one element matches, false otherwise.

Usage

if ($('#myElement').is('.active')) {
console.log('The element is active');
}

Example

exists

Checks if there are any elements in the current Query object.

Syntax

$('selector').exists()

Returns

boolean - true if the Query object contains at least one element, false otherwise.

Usage

if ($('.my-element').exists()) {
console.log('The element exists in the DOM');
} else {
console.log('The element does not exist in the DOM');
}

Quick Check exists() is a convenient way to check for the presence of elements without needing to compare the length property.

Example

isVisible

Checks if ALL elements in the current set are visible by determining if they have layout dimensions (width and height greater than 0).

Syntax

Check Layout Visibility

$('selector').isVisible()

Check Visual Visibility (including opacity)

$('selector').isVisible({ includeOpacity: true })

Parameters

NameTypeDescription
optionsObjectConfiguration options
options.includeOpacityBooleanWhether to also check that opacity > 0. Defaults to false.

Returns

boolean - true if ALL elements are visible, false if ANY element is not visible, or undefined for empty selection.

Usage

Basic Visibility Check

// Check if element has layout dimensions
if ($('#myElement').isVisible()) {
console.log('Element is rendered in the page');
}

Visual Visibility Check

// Check if element is both rendered and has opacity > 0
if ($('.fade-element').isVisible({ includeOpacity: true })) {
console.log('Element is visually perceivable');
} else {
console.log('Element may be transparent or hidden');
}

Working with Multiple Elements

// All elements have same visibility - returns single boolean
const allVisible = $('.visible-items').isVisible();
console.log(allVisible); // true (if all are visible)
// Mixed visibility states - returns array
const mixedStates = $('.mixed-items').isVisible();
console.log(mixedStates); // [true, false, true]
// Check if all elements are visible
if ($('.items').isVisible() === true) {
console.log('All items are visible');
} else if (Array.isArray($('.items').isVisible())) {
console.log('Items have mixed visibility');
}

Behavior

Default Behavior (includeOpacity: false)

  • display: none → false (no layout dimensions)
  • visibility: hidden → false (no layout dimensions)
  • opacity: 0 → true (still occupies space in layout)
  • width: 0; height: 0 → false

With Opacity Check (includeOpacity: true)

  • All above behaviors, plus:
  • opacity: 0 → false (not visually perceivable)
  • opacity: 0.01 → true (has some visual presence)

Modern Implementation Uses getBoundingClientRect() for accurate, cross-browser layout dimension detection and getComputedStyle() for opacity calculation.

Example

not

Remove elements from the set of matched elements.

Syntax

$('selector').not(selector)

Parameters

NameTypeDescription
selectorString or FunctionA string containing a selector expression to match elements against or a function to test each element

Returns

A new Query object with elements that do not match the selector.

Usage

$('div').not('.ignore').addClass('highlight');

Inverse Selection not() is particularly useful for excluding specific elements from a larger set based on various criteria.

Example

contains

Checks if any element in the current set contains the specified target element or elements matching a selector.

Syntax

Check by CSS Selector

$('selector').contains(selectorString)

Check by Element Reference

$('selector').contains(element)

Check by Query Object

$('selector').contains(queryObject)

Parameters

NameTypeDescription
selectorString | Element | QueryA CSS selector string, DOM element, or Query object to check for containment

Returns

boolean - true if any element in the set contains the specified target, false otherwise.

Usage

String Selector

// Check if a container has elements matching a selector
if ($('.container').contains('.highlight')) {
console.log('Container has highlighted elements');
}

Element Reference

// Check if a specific element is contained
const button = document.querySelector('button');
if ($('.toolbar').contains(button)) {
console.log('Button is inside the toolbar');
}

Query Object

// Check if any selected elements are contained
const $inputs = $('input[required]');
if ($('form').contains($inputs)) {
console.log('Form contains required inputs');
}

Shadow DOM

// check if element is in web component
const result = $$('web-component').contains('.shadow-element');

Example

eq

Returns a Query object containing only the element at the specified index.

Syntax

$('selector').eq(index)

Parameters

NameTypeDescription
indexNumberZero-based index of the element to select

Returns

A new Query object containing the element at the specified index.

Usage

// Get the third paragraph (index 2)
const thirdPara = $('p').eq(2);
thirdPara.css('color', 'red');
// Get the last paragraph using negative index
const lastPara = $('p').eq(-1);
lastPara.css('font-weight', 'bold');

Example

first

Returns a Query object containing only the first element from the matched set.

Syntax

$('selector').first()

Returns

A new Query object containing the first element.

Usage

// Get the first list item
const firstItem = $('li').first();
firstItem.addClass('first-item');
// Chain with other methods
$('div').first().css('background', 'yellow').fadeIn();

Example

last

Returns a Query object containing only the last element from the matched set.

Syntax

$('selector').last()

Returns

A new Query object containing the last element.

Usage

// Get the last list item
const lastItem = $('li').last();
lastItem.addClass('last-item');
// Chain with other methods
$('div').last().css('background', 'blue').fadeIn();

Example

slice

Returns a Query object containing a subset of elements from the matched set, based on the specified range.

Syntax

$('selector').slice(start, end)

Parameters

NameTypeDescription
startNumberZero-based index to start the slice
endNumber(Optional) Zero-based index to end the slice

Returns

A new Query object containing the sliced elements.

Usage

// Get elements 2 through 4 (indices 1, 2, 3)
const middleItems = $('li').slice(1, 4);
middleItems.addClass('middle-items');
// Get all elements from index 2 onwards
const fromSecond = $('li').slice(2);
fromSecond.css('color', 'green');

Example

end

Returns to the previous set of elements in the traversal chain.

Syntax

$('selector').find('childSelector').end()

Returns

The Query object that was active before the last traversal method was used.

Usage

// Work with different levels in the DOM without multiple selections
$('.card')
.addClass('highlighted') // Add class to cards
.find('.title') // Switch to titles within cards
.css('font-weight', 'bold') // Bold the titles
.end() // Go back to the card selection
.find('.content') // Now find content within cards
.html('<p>New content</p>'); // Change the HTML

Example

Previous
Iterators
Next
Utilities