Selector.filter Method

Finds elements that match the condition.

Syntax

filter(cssSelector)

Selector().filter(cssSelector) → Selector

Finds elements that match a CSS selector.

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

filter(filterFn, dependencies)

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

Finds elements that satisfy a predicate.

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

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

Parameter Description
node The current DOM node.
idx Index of the current node among other nodes in the matched set.
Selector('div').filter((node, idx) => {
    // node === a <div> node
    // idx === index of the current <div> node
});

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

const isNodeOk = (node, idx) => {
    const unnecessaryCheckboxIndex = 5;

    return node.checked && unnecessaryCheckboxIndex !== idx;
};

const checkedBoxes = Selector('input[type="checkbox"]').filter((node, idx) => {
    return isNodeOk(node, idx);
}, { isNodeOk });

Example

// Selects div elements that
// have the column class.
const columns = Selector('div').filter('.column');