Selector.child Method

Finds child elements for nodes in the matched set.

Important

For information about how to access child nodes, see Access Child Nodes in the DOM Hierarchy.

Syntax

child

Selector().child() → Selector

Finds the child elements of all nodes in the matched set.

child(index)

Selector().child(index) → Selector

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

Argument Type Description
index Number The zero-based index. If index is negative, the index is counted from the end of the matched set.

child(cssSelector)

Selector().child(cssSelector) → Selector

Finds the child elements of all nodes in the matched set and filters them with a CSS selector.

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

child(filterFn, dependencies)

Selector().child(filterFn [, dependencies]) → Selector

Finds the child 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 children of all ul elements.
Selector('ul').child();

// Selects all closest children of all div elements.
Selector('div').child(0);

// Selects all furthest children of all table elements.
Selector('table').child(-1);

// Selects all ul elements that are children of a nav element.
Selector('nav').child('ul');

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) => { /*...*/ };

Selector('ul').prevSibling((node, idx, originNode) => {
    return isNodeOk(node, idx, originNode);
}, { isNodeOk });