Obtenha irmãos de um elemento

Para obter o próximo irmão e o irmão anterior de um elemento, você usa as propriedades element.nextSiblinge :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 )

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *