Selector.filter Method

Returns elements that match the CSS Selector or the filter function.

Syntax

filter(cssSelector)

Selector().filter(cssSelector) → Selector

Returns elements that match the CSS selector.

Argument	Type	Description
cssSelector	String	CSS Selector.

filter(filterFn, dependencies)

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

Returns elements that meet the conditions of the filterFunction function.

Argument	Type	Description
filterFn	Function	Filter function.
dependencies (optional)	Object	Filter function arguments.

The client-side filterFn function accepts the following parameters:

Parameter	Description
node	The current DOM node.
idx	The index of the current DOM node.

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');