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

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