Query - DOM Traversal

Navigate the DOM tree relative to matched elements. Use $$ to pierce shadow DOM boundaries.

Descendants

find

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

Finds descendant elements matching the selector.

Parameters

Returns

Query object containing matched elements.

Usage

$('div').find('p').addClass('highlight');

Example

children

$('selector').children();
$('selector').children(selector);

Gets direct children, optionally filtered by a selector.

Parameters

Returns

Query object containing child elements.

Usage

$('ul').children('li').css('color', 'red');

Example

Ancestors

parent

$('selector').parent();
$('selector').parent(selector);

Gets the parent of each element, optionally filtered by a selector.

Parameters

Returns

Query object containing parent elements.

Usage

$('button').parent().addClass('button-group');

Example

closest

$('selector').closest(selector);
$('selector').closest(selector, { returnAll: true });

Finds the closest ancestor matching the selector. With returnAll: true, returns all matching ancestors.

Parameters

Returns

Query object containing ancestor element(s).

Usage

$('input').closest('form').submit();

Example

closestAll

$('selector').closestAll(selector);

Gets all ancestor elements matching the selector.

Alias for closest(selector, { returnAll: true })

Parameters

Returns

Query object containing all matching ancestors (closest to farthest).

Usage

$('span').closestAll('.container').addClass('highlight');

Siblings

siblings

$('selector').siblings();
$('selector').siblings(selector);

Gets all siblings, optionally filtered by a selector.

Parameters

Returns

Query object containing sibling elements.

Usage

$('.selected').siblings().addClass('dimmed');

Example

next

$('selector').next();
$('selector').next(selector);

Gets the immediately following sibling, optionally filtered.

Parameters

Returns

Query object containing next sibling element(s).

Usage

$('h2').next().css('margin-top', '20px');

Example

prev

$('selector').prev();
$('selector').prev(selector);

Gets the immediately preceding sibling, optionally filtered.

Parameters

Returns

Query object containing previous sibling element(s).

Usage

$('h2').prev().css('margin-bottom', '10px');

Example

Filtering

filter

$('selector').filter(selector);
$('selector').filter(fn);

Reduces the set to elements matching the selector or passing the function test.

Parameters

Returns

Query object containing filtered elements.

Usage

By Selector

$('p').filter('.highlight').css('background', 'yellow');

By Function

$('li').filter((el) => $(el).text().includes('important')).addClass('priority');

Example

not

$('selector').not(selector);
$('selector').not(fn);

Removes elements matching the selector or passing the function test.

Parameters

Returns

Query object containing remaining elements.

Usage

By Selector

$('p').not('.exclude').css('color', 'blue');

By Function

$('li').not((el) => $(el).text().trim() === '').addClass('visible');

Example

is

$('selector').is(selector);
$('selector').is(fn);

Tests if any element matches the selector or passes the function test.

Parameters

Returns

true if at least one element matches, false otherwise.

Usage

if ($('p').is('.active')) {
  console.log('At least one paragraph is active');
}

Example

contains

$('selector').contains(element);

Tests if the first matched element contains the given element.

Parameters

Returns

true if contained, false otherwise.

Usage

if ($('#container').contains(event.target)) {
  console.log('Click was inside container');
}

Example

Chain

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