Query - Utilities

Utility methods in Query allow you to get information about elements, access specific elements in a collection, and work with element dimensions and positioning in the DOM.

count

Get the number of elements in the Query object.

Count Usage count() is preferred although the Query object is array-like and length will also work. If it’s really important to you — you can still do that.

Syntax

$('selector').count()

Returns

number - The number of elements in the Query object.

Usage

const paragraphCount = $('p').count();
console.log(`There are ${paragraphCount} paragraphs on the page.`);

index

Get the index of an element in the set of matched elements.

DOM Position index() is useful for determining the position of an element among its siblings.

Syntax

$('selector').index()

Returns

number - The index of the first element within the Query object relative to its sibling elements, or -1 if not found.

Usage

const index = $('li.active').index();
console.log(`The active list item is at index ${index}`);

offsetParent

Get the closest positioned ancestor element.

Edge-Case Improvements offsetParent() handles some [edge cases}(https://issues.chromium.org/issues/41131675) that prevent the naive use of el.offsetParent

Syntax

$('selector').offsetParent(options)

Parameters

Returns

Query object containing the offset parent element(s).

Usage

const offsetParent = $('.child-element').offsetParent();
console.log('Offset parent:', offsetParent.get(0));

Element Access Methods

These methods provide access to individual elements in a Query collection.

el

Returns the first DOM element in the current set.

Syntax

$('selector').el()

Returns

The first DOM element in the collection, or undefined if the collection is empty.

Usage

const firstParagraph = $('p').el();
console.log(firstParagraph.textContent);

get

Gets the DOM element at the specified index, or all elements if no index is provided.

Syntax

$('selector').get(index)

Parameters

Returns

The element at the specified index, an array of all elements, or undefined if the index is out of bounds.

Usage

// Get the second paragraph element
const secondParagraph = $('p').get(1);

// Get all paragraph elements as an array
const allParagraphs = $('p').get();

eq

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

Syntax

$('selector').eq(index)

Parameters

Returns

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

Usage

// Get the second paragraph as a Query object
const secondParagraph = $('p').eq(1);
secondParagraph.addClass('highlighted');

first

Returns a new Query instance containing the first element in the current set.

Syntax

$('selector').first()

Returns

A new Query instance containing the first element in the collection.

Usage

// Get the first paragraph as a Query object
const firstParagraph = $('p').first();
firstParagraph.addClass('highlighted');

last

Returns a new Query instance containing the last element in the current set.

Syntax

$('selector').last()

Returns

A new Query instance containing the last element in the collection.

Usage

// Get the last paragraph as a Query object
const lastParagraph = $('p').last();
lastParagraph.addClass('highlighted');

prop

Gets or sets a property of elements in the current set.

Syntax

// Get property
$('selector').prop(name)

// Set property
$('selector').prop(name, value)

Parameters

Returns

When getting: The property value of the first element. When setting: The Query instance for chaining.

Usage

// Get the checked state of a checkbox
const isChecked = $('input[type="checkbox"]').prop('checked');

// Set the disabled property on all buttons
$('button').prop('disabled', true);