Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
find
parent
children
siblings
closest
next
prev
Query - DOM Traversal
The DOM Traversal methods allow you to get from one element to another based off their relationship. Query supports piercing shadow DOM boundaries when using $$
find
Finds descendant elements that match the specified selector.
Syntax
$('selector').find(childSelector)Parameters
| Name | Type | Description |
|---|---|---|
| childSelector | string | A selector to match descendant elements |
Returns
Query object containing the matched elements.
Usage
Standard
// Find all paragraphs within a div$('div').find('p').addClass('highlight');Shadow DOM
$$('my-component').find('p').addClass('highlight');parent
Gets the parent of each element in the current set of matched elements.
Syntax
$('selector').parent(parentSelector)Parameters
| Name | Type | Description |
|---|---|---|
| parentSelector | string | (Optional) A selector to filter parent elements |
Returns
Query object containing the parent elements.
Usage
Standard
// Get the parent of a button$('button').parent().addClass('button-group');Shadow DOM
$$('my-component menu-item').parent().addClass('menu-styling');children
Gets the children of each element in the set of matched elements.
Syntax
$('selector').children(childSelector)Parameters
| Name | Type | Description |
|---|---|---|
| childSelector | string | (Optional) A selector to filter children elements |
Returns
Query object containing the child elements.
Usage
// Get all direct child list items of an unordered list$('ul').children('li').css('color', 'red');siblings
Gets the siblings of each element in the set of matched elements.
Syntax
$('selector').siblings(siblingSelector)Parameters
| Name | Type | Description |
|---|---|---|
| siblingSelector | string | (Optional) A selector to filter sibling elements |
Returns
Query object containing the sibling elements.
Usage
Standard
// Get all siblings of a selected element$('.selected').siblings().addClass('dimmed');Shadow DOM
$$('my-component').find('.shadow-selected').siblings().addClass('shadow-dimmed');closest
Finds the closest ancestor element that matches the selector.
Syntax
$('selector').closest(ancestorSelector)Parameters
| Name | Type | Description |
|---|---|---|
| ancestorSelector | string | A selector to match ancestor elements |
Returns
Query object containing the closest matching ancestor.
Usage
Standard
// Find the closest form ancestor$('input').closest('form').submit();Shadow DOM
$$('my-component').find('input').closest('.shadow-form').addClass('validated');next
Gets the immediately following sibling of each element in the set of matched elements.
Syntax
$('selector').next(nextSelector)Parameters
| Name | Type | Description |
|---|---|---|
| nextSelector | string | (Optional) A selector to filter the next element |
Returns
Query object containing the next sibling elements.
Usage
Standard
// Get the next sibling of a paragraph$('p').next().css('margin-top', '20px');Shadow DOM
$$('my-component').find('.shadow-paragraph').next().css('margin-top', '10px');prev
Gets the immediately preceding sibling of each element in the set of matched elements.
Syntax
$('selector').prev(prevSelector)Parameters
| Name | Type | Description |
|---|---|---|
| prevSelector | string | (Optional) A selector to filter the previous element |
Returns
Query object containing the previous sibling elements.
Usage
Standard
// Get the previous sibling of a heading$('h2').prev().css('color', 'red');Shadow DOM
$$('my-component').find('.shadow-heading').prev().css('margin-bottom', '5px');