Selector.nextSibling Method

Selects succeeding sibling elements.

Syntax

nextSibling

Selector().nextSibling() → Selector

Finds the succeeding sibling elements of all nodes in the matched set.

nextSibling(index)

Selector().nextSibling(index) → Selector

Finds the succeeding sibling elements of all nodes in the matched set and filters them by index.

Argument	Type	Description
index	Number	The zero-based index. Elements are indexed beginning from the closest sibling. If index is negative, the index is counted from the end of the matched set.

nextSibling(cssSelector)

Selector().nextSibling(cssSelector) → Selector

Finds the succeeding sibling elements of all nodes in the matched set and uses a CSS selector to filter them.

Argument	Type	Description
cssSelector	String	The CSS selector string used to filter child elements.

nextSibling(filterFn, dependencies)

Selector().nextSibling(filterFn, dependencies) → Selector

Finds the succeeding sibling elements of all nodes in the matched set and uses a predicate to filter them.

Argument	Type	Description
filterFn	Function	The predicate used to filter the elements.
dependencies (optional)	Object	Functions, variables, or objects passed to the filterFn function.

See Filtering DOM Elements by Predicates.

Examples

// Selects all succeeding siblings of all 'header' elements.
const siblingsHeader = Selector('header').nextSibling();

// Selects all closest succeeding siblings of all div elements.
const closestSiblingsDiv = Selector('div').nextSibling(0);

// Selects all furthest succeeding siblings of all fieldset elements.
const furthestSiblingsFieldset = Selector('fieldset').nextSibling(-1);

// Selects all p elements that are succeeding siblings of an legend element.
const pSiblingsDiv = Selector('legend').nextSibling('p');

Filtering DOM Elements by Predicates

Functions that search for elements in the DOM tree allow you to use a filterFn predicate to filter the matched set.

The filterFn predicate is executed on the client side and accepts the following parameters:

Parameter	Description
node	The current matching node.
idx	A matching node’s zero-based index.
originNode	A node from the left-hand selector’s matched set whose parents/siblings/children are being iterated.

Selector('section').prevSibling((node, idx, originNode) => {
    // node === the <section>'s preceding sibling node
    // idx === index of the current <section>'s preceding sibling node
    // originNode === the <section> element
});

The dependencies parameter allows you to pass objects to the filterFn client-side scope where they appear as variables.

const isNodeOk = (node, idx, originNode) => {
    console.log({ node, idx, originNode });
    return idx === 6;
};

const filteredDiv = Selector('div').prevSibling((node) => {
    return !isNaN(node.textContent);
}, { isNodeOk });