Para obter o próximo irmão e o irmão anterior de um elemento, você usa as propriedades element.nextSibling
e :element. previousSibling
const previous = element.previousSibling;
const next = element.nextSibling;
Linguagem de código: JavaScript ( javascript )
A seguinte função auxiliar obtém todos os seguintes irmãos de um elemento:
const getNextSiblings = (e) => {
let siblings = [];
while (e = e.nextSibling) {
siblings.push(e);
}
return siblings;
}
Linguagem de código: JavaScript ( javascript )
E a seguinte função auxiliar obtém todos os irmãos anteriores de um elemento:
const getPreviousSiblings = (e) => {
let siblings = [];
while (e = e.previousSibling) {
siblings.push(e);
}
return siblings;
}
Linguagem de código: JavaScript ( javascript )
A seguinte função auxiliar obtém todos os irmãos de um elemento:
const getSiblings = (e) => {
let siblings = [];
e = e.parentNode.firstChild;
do {
siblings.push(e);
} while (e = e.nextSibling);
return siblings;
}
Linguagem de código: JavaScript ( javascript )
Às vezes, você deseja filtrar os irmãos de um elemento, por exemplo, obter todos os irmãos do elemento atual que são os p elementos.
Para fazer isso, você pode adicionar uma função de filtro à função auxiliar, conforme mostrado no exemplo a seguir:
const getSiblings = (e, filter) => {
let siblings = [];
e = e.parentNode.firstChild;
do {
if (!filter || filter(e)) {
siblings.push(e);
}
} while (e = e.nextSibling);
return siblings;
}
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir usa a getSiblings()
função auxiliar para obter todos os irmãos de um elemento âncora, que também são elementos âncora:
const e = document.querySelector('a.first');
let links = getSiblings(el, (e) => {
e.nodeName.toLowerCase() === 'a';
});
Linguagem de código: JavaScript ( javascript )
Anterior