Query - Collections

Work with Query collections: count elements, select subsets, and combine sets.

Info

count

$('selector').count();

Gets the number of elements in the Query object.

Returns

Number of elements.

Usage

const total = $('li').count();

Example

index

$('selector').index();

Gets the index of the first element relative to its siblings.

Returns

Index position, or -1 if not found.

Usage

const position = $('.active').index();

exists

$('selector').exists();

Checks if there are any elements in the Query object.

Returns

true if at least one element exists, false otherwise.

Usage

if ($('.modal').exists()) {
  console.log('Modal is in the DOM');
}

Example

Subset

eq

$('selector').eq(index);

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

Parameters

Returns

Query object containing the element.

Usage

$('li').eq(2).addClass('third');
$('li').eq(-1).addClass('last');

Example

first

$('selector').first();

Returns a new Query object containing the first element.

Returns

Query object containing the first element.

Usage

$('li').first().addClass('first-item');

Example

last

$('selector').last();

Returns a new Query object containing the last element.

Returns

Query object containing the last element.

Usage

$('li').last().addClass('last-item');

Example

slice

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

Returns a Query object containing a portion of elements.

Parameters

Returns

Query object containing the sliced elements.

Usage

$('li').slice(1, 4).addClass('middle');
$('li').slice(2).css('color', 'gray');

Example

Manipulation

reverse

$('selector').reverse();

Reverses the order of elements in the collection.

Returns

New Query object with reversed elements.

Usage

$('li').reverse().each((el, i) => {
  console.log(`Reversed index ${i}:`, el.textContent);
});

add

$('selector').add(elements);

Creates a new Query collection combining current elements with additional elements.

Parameters

Returns

New Query object with combined elements (duplicates removed).

Usage

$('.selected').add('.highlighted').css('border', '1px solid blue');

Example

chain

$('selector').chain(elements);

Creates a new Query instance containing the provided elements, preserving options from the original Query.

Parameters

Returns

New Query object with the provided elements.

Usage

const $paragraphs = $('div').chain(document.querySelectorAll('p'));

end

$('selector').find('child').end();

Returns to the previous Query set in the chain.

Returns

Query object before the last traversal.

Usage

$('.card')
  .find('.title').css('font-weight', 'bold').end()
  .find('.content').html('<p>New</p>');

Example