Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
find
parent
children
siblings
closest
next
prev
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');