Tree Traversal

Question 1

Get single element children

var children = element.children();

Answer 1

var children = element.children;

Question 2

Get single element children filtered by selector

var children = element.children(‘div’);

Answer 2

var children = element.queryAll(‘> div’);

Question 3

var children = elements.children();

Answer 3

ES6

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

ES5

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

Question 4

Get children filtered by selector from a set of elements

var children = elements.children(‘div’);

Answer 4

ES6

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

ES5

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

Question 5

Get single elements contents

var contents = element.contents();

Answer 5

var contents = element.childNodes;

Question 6

Get multiple elements contents

var contents = elements.contents();

Answer 6

ES6

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

ES5

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

Question 7

Get closing matching parent for a single element

var closest = element.closest(‘div’);

Answer 7

var closest = element.closest(‘div’);

Question 8

Get closest matching parent for a set of elements

var closest = elements.closest(‘div’);

Answer 8

ES6

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

ES5

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

Question 9

Find descendants of a single element

var found = element.find(‘div’);

Answer 9

var found = element.queryAll(‘div’);

Question 10

Find descendants in the set of elements

var found = elements.find(‘div’);

Answer 10

ES6

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

ES5

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

Question 11

Get the next sibling for a single element

var next = element.next();

Answer 11

var next = element.nextElementSibling;

Question 12

Get the next sibling filtered by selector for a single element

var next = element.next(‘div’);

Answer 12

var next = element.query(‘+ div’)

Question 13

Get the next sibling for each element in the set

var next = elements.next();

Answer 13

ES6

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

ES5

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

Question 14

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

var next = elements.next(‘div’);

Answer 14

ES6

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

ES5

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

Question 15

Get all the following sibling for an element

var next = element.nextAll();

Answer 15

var next = element.queryAll(‘~ *’);