Tree traversal

children

Get the children of each element in the set of matched elements, optionally filtered by a selector.

Get single element children

jQuery

var children = element.children();

Vanilla JS

var children = element.children;

Get single element children filtered by selector

jQuery

var children = element.children('div');

Vanilla JS

var children = element.queryAll('> div');

Get children from the set of elements

jQuery

var children = elements.children();

Vanilla ES6+

var children = elements.map(x => [...x.children]);
children = [].concat(...children);

Vanilla ES5

var children = elements.reduce(function(result, element) {
    return result.concat([].slice.call(element.children));
}, []);

Element children is a HTMLCollection, which is an array-like object, so we can't call array manipulation methods directly.

Get children filtered by selector from the set of elements

jQuery

var children = elements.children('div');

Vanilla ES6+

var children = elements.map(x => x.queryAll('> div'));
children = [].concat(...children);

Vanilla ES5

var children = elements.reduce(function(result, element) {
    return result.concat(element.queryAll('> div'));
}, []);

Get the children of each element in the set of matched elements, including text and comment nodes.

Get single element contents

jQuery

var contents = element.contents();

Vanilla JS

var contents = element.childNodes;

Get multiple element contents

jQuery

var contents = elements.contents();

Vanilla ES6+

var contents = elements.map(x => [...x.childNodes]);
contents = [].concat(...contents);

Vanilla ES5

var contents = elements.reduce(function(result, element) {
    return result.concat([].slice.call(element.childNodes));
}, []);

Element child nodes is a NodeList, which is an array-like object, so we can't call array manipulation methods directly.

closest

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Get closest matching parent for single element

jQuery

var closest = element.closest('div');

Vanilla JS

var closest = element.closest('div');

Get closest matching parent for the set of elements

jQuery

var closest = elements.closest('div');

Vanilla ES6+

var closest = elements.map(x => x.closest('div'));

Vanilla ES5

var closest = elements.map(function(element) {
    return element.closest('div');
});

find

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Find descendants in single element

jQuery

var found = element.find('div');

Vanilla JS

var found = element.queryAll('div');

Find descendants in the the set of elements

jQuery

var found = elements.find('div');

Vanilla ES6+

var found = elements.map(x => x.queryAll('div'));
found = [].concat(...found);

Vanilla ES5

var found = elements.reduce(function(result, element) {
    return result.concat(element.queryAll('div'));
}, []);

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Get next sibling for single element

jQuery

var next = element.next();

Vanilla JS

var next = element.nextElementSibling;

Get next sibling filtered by selector for single element

jQuery

var next = element.next('div');

Vanilla JS

var next = element.query('+ div');

Get next sibling for each element in the set

jQuery

var next = elements.next();

Vanilla ES6+

var next = elements
    .map(x => x.nextElementSibling)
    .filter(x => x);

Vanilla ES5

var next = [];
elements.forEach(function(element) {
    if (element.nextElementSibling)
        next.push(element.nextElementSibling);
});

Get next sibling filtered by selector for each element in the set

jQuery

var next = elements.next('div');

Vanilla ES6+

var next = elements
    .map(x => x.query('+ div'))
    .filter(x => x);

Vanilla ES5

var next = [];
elements.forEach(function(element) {
    if (element.nextElementSibling && element.nextElementSibling.matches('div'))
        next.push(element.nextElementSibling);
});

nextAll

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

Get all following siblings for single element

jQuery

var next = element.nextAll();

Vanilla JS

var next = element.queryAll('~ *');

Get all following siblings filtered by selector for single element

jQuery

var next = element.nextAll('div');

Vanilla JS

var next = element.queryAll('~ div');

Get all following siblings for the set of elements

jQuery

var next = elements.nextAll();

Vanilla ES6+

var next = elements.map(x => x.queryAll('~ *'));
next = [].concat(...next);

Vanilla ES5

var next = elements.map(function(element) {
    return element.queryAll('~ *'));
});
next = [].concat.apply([], next);

Get all following siblings filtered by selector for the set of elements

jQuery

var next = elements.nextAll('div');

Vanilla ES6+

var next = elements.map(x => x.queryAll('~ div'));
next = [].concat(...next);

Vanilla ES5

var next = elements.map(function(element) {
    return element.queryAll('~ div'));
});
next = [].concat.apply([], next);

nextUntil

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

Get all following siblings bounded by selector for single element

jQuery

var next = element.nextUntil('div');

Vanilla JS

var next = []; 
while (element.nextElementSibling && !element.nextElementSibling.matches('div'))
    next.push(element = element.nextElementSibling);

Get all following siblings bounded by selector for the set of elements

jQuery

var next = elements.nextUntil('div');

Vanilla JS

var next = elements.reduce(function(result, element) {
    while (element.nextElementSibling && !element.nextElementSibling.matches('div'))
        result.push(element = element.nextElementSibling);
    return result;
}, []);

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

Get previous sibling for single element

jQuery

var prev = element.prev();

Vanilla JS

var prev = element.previousElementSibling;

Get previous sibling filtered by selector for single element

jQuery

var prev = element.prev('div');

Vanilla JS

var prev = element.previousElementSibling;
prev = prev && prev.matches('div') ? prev : null;

Get previous sibling for each element in the set

jQuery

var prev = elements.prev();

Vanilla ES6+

var prev = elements
    .map(x => x.previousElementSibling)
    .filter(x => x);

Vanilla ES5

var prev = [];
elements.forEach(function(element) {
    if (element.previousElementSibling)
        prev.push(element.previousElementSibling);
});

Get previous sibling filtered by selector for each element in the set

jQuery

var prev = elements.prev('div');

Vanilla ES6+

var prev = elements
    .map(x => x.previousElementSibling)
    .filter(x => x && x.matches('div'));

Vanilla ES5

var prev = [];
elements.forEach(function(element) {
    if (element.previousElementSibling && element.previousElementSibling.matches('div'))
        prev.push(sibling);
});

prevAll

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

Get all preceding siblings for single element

jQuery

var prev = element.prevAll();

Vanilla JS

var prev = [];
while (element.previousElementSibling)
    prev.push(element = element.previousElementSibling);

Get all preceding siblings filtered by selector for single element

jQuery

var prev = element.prevAll('div');

Vanilla JS

var prev = [];
while (element.previousElementSibling && element.previousElementSibling.matches('div'))
    prev.push(element = element.previousElementSibling);

Get all preceding siblings for the set of elements

jQuery

var prev = elements.prevAll();

Vanilla JS

var prev = elements.reduce(function(result, element) {
    while (element.previousElementSibling)
        result.push(element = element.previousElementSibling);
    return result;
}, []);

Get all preceding siblings filtered by selector for the set of elements

jQuery

var prev = elements.prevAll('div');

Vanilla JS

var prev = elements.reduce(function(result, element) {
    while (element.previousElementSibling && element.previousElementSibling.matches('div'))
        result.push(element = element.previousElementSibling);
    return result;
}, []);

prevUntil

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Get all preceding siblings bounded by selector for single element

jQuery

var prev = element.prevUntil('div');

Vanilla JS

var prev = []; 
while (element.previousElementSibling && !element.previousElementSibling.matches('div'))
    prev.push(element = element.previousElementSibling);

Get all preceding siblings bounded by selector for the set of elements

jQuery

var prev = elements.prevUntil('div');

Vanilla JS

var prev = elements.reduce(function(result, element) {
    while (element.previousElementSibling && !element.previousElementSibling.matches('div'))
        result.push(element = element.previousElementSibling);
    return result;
}, []);

parent

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Get single element parent

jQuery

var parent = element.parent();

Vanilla JS

var parent = element.parentElement;

Get single element parent filtered by selector

jQuery

var parent = element.parent('div');

Vanilla JS

var parent = element.parentElement;
parent = parent.matches('div') ? parent : null;

Get parent for each element in the set

jQuery

var parent = elements.parent();

Vanilla ES6+

var parents = elements.map(x => x.parentElement);
parents = [...new Set(parents)];

Vanilla ES5

var parents = [];
elements.forEach(function(element) {
    if (parents.indexOf(element.parentElement) == -1)
        parents.push(element.parentElement);
});

Get parent filtered by selector for each element in the set

jQuery

var parent = elements.parent('div');

Vanilla ES6+

var parents = elements
    .map(x => x.parentElement)
    .filter(x => x.matches('div'));
parents = [...new Set(parents)];

Vanilla ES5

var parents = [];
elements.forEach(function(element) {
    var parent = element.parentElement;
    if (parent.matches('div') && parents.indexOf(parent) == -1)
        parents.push(parent);
});

parents

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Get single element ancestors

jQuery

var parents = element.parents();

Vanilla JS

var parents = [];
while (element.parentElement)
    parents.push(element = element.parentElement);

Get single element ancestors filtered by selector

jQuery

var parents = element.parents('div');

Vanilla JS

var parents = [];
while (element = element.parentElement.closest('div'))
    parents.push(element);

Get ancestors for each element in the set

jQuery

var parents = elements.parents();

Vanilla ES6+

var parents = elements
    .map(x => x.parentElement)
    .filter(x => x);
parents = [...new Set(parents)];

Vanilla ES5

var parents = [];
elements.forEach(function(element) {
    while (element.parentElement && parents.indexOf(element.parentElement) == -1)
        parents.push(element = element.parentElement);
});

Get ancestors filtered by selector for each element in the set

jQuery

var parents = elements.parents('div');

Vanilla ES6+

var parents = elements
    .filter(x => x.parentElement)
    .map(x => x.parentElement.closest('div'))
    .filter(x => x);
parents = [...new Set(parents)];

Vanilla ES5

var parents = [];
elements.forEach(function(element) {    
    while (element = element.parentElement.closest('div'))
        if (parents.indexOf(element) == -1)
            parents.push(element);
});

parentsUntil

Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

Get all ancestors bounded by selector for single element

jQuery

var parents = element.parentsUntil('div');

Vanilla JS

var parents = [];
while (element.parentElement && !element.parentElement.matches('div'))
    parents.push(element = element.parentElement);

Get all ancestors bounded by selector for the set of elements

jQuery

var parents = elements.parentsUntil('div');

Vanilla ES6+

var parents = [];
for (var element of elements)
    while (element.parentElement && !element.parentElement.matches('div') && parents.indexOf(element.parentElement) == -1)
        parents.push(element = element.parentElement);

Vanilla ES5

var parents = [];
elements.forEach(function(element) {
    while (element.parentElement && !element.parentElement.matches('div') && parents.indexOf(element.parentElement) == -1)
        parents.push(element = element.parentElement);
});

siblings

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Get single element siblings

jQuery

var siblings = element.siblings();

Vanilla ES6+

var siblings = Array
    .from(element.parentElement.children)
    .filter(x => x != element);

Vanilla ES5

var siblings = [].slice.call(element.parentElement.children);
siblings.splice(siblings.indexOf(element), 1);

Element children is a HTMLCollection, which is an array-like object, so we can't call array manipulation methods directly.

Get single element siblings filtered by selector

jQuery

var siblings = element.siblings('div');

Vanilla ES6+

var siblings = Array
    .from(element.parentElement.children)
    .filter(x => x != element && x.matches('div'));

Vanilla ES5

var siblings = [].filter.call(element.parentElement.children, function(sibling) {
    return sibling != element && sibling.matches('div');
});

Get siblings for each element in the set

jQuery

var siblings = elements.siblings();

Vanilla ES6+

var siblings = [];
for (var element of elements)
    for (var sibling of element.parentElement.children) 
        if (siblings.indexOf(sibling) == -1 && sibling != element)
            siblings.push(sibling);

Vanilla ES5

var siblings = [];
elements.forEach(function(element) {
    [].forEach.call(element.parentElement.children, function(sibling) {
        if (siblings.indexOf(sibling) == -1 && sibling != element)
            siblings.push(sibling);
    });
});

Get siblings filtered by selector for each element in the set

jQuery

var siblings = elements.siblings('div');

Vanilla ES6+

var siblings = [];
for (var element of elements)
    for (var sibling of element.parentElement.children)
        if (siblings.indexOf(sibling) == -1 && sibling.matches('div') && sibling != element)
            siblings.push(sibling);

Vanilla ES5

var siblings = [];
elements.forEach(function(element) {
    [].forEach.call(element.parentElement.children, function(sibling) {
        if (siblings.indexOf(sibling) == -1 && sibling.matches('div') && sibling != element)
            siblings.push(sibling);
    });
});