Irmãos JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como selecionar os próximos irmãos, irmãos anteriores e todos os irmãos de um elemento.

Digamos que você tenha a seguinte lista de itens:

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
</ul>
Linguagem de código:  HTML, XML  ( xml )

Obtenha os próximos irmãos

Para obter o próximo irmão de um elemento, você usa o nextElementSiblingatributo:

let nextSibling = currentNode.nextElementSibling;Linguagem de código:  JavaScript  ( javascript )

O nextElementSiblingretorno nullse o elemento especificado for o último da lista.

O exemplo a seguir usa a nextElementSiblingpropriedade para obter o próximo irmão do item da lista que possui a currentclasse:

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

console.log(nextSibling);Linguagem de código:  JavaScript  ( javascript )

Saída:

<li>Careers</li>Linguagem de código:  HTML, XML  ( xml )

Neste exemplo:

Primeiro, selecione o item da lista cuja classe está currentusando o arquivo querySelector().
Segundo, obtenha o próximo irmão desse item da lista usando a nextElementSiblingpropriedade.

Para obter todos os próximos irmãos de um elemento, você pode usar o seguinte código:

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

while(nextSibling) {
    console.log(nextSibling);
    nextSibling = nextSibling.nextElementSibling;
}Linguagem de código:  JavaScript  ( javascript )

Obtenha os irmãos anteriores

Para obter os irmãos anteriores de um elemento, você usa o previousElementSiblingatributo:

let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;Linguagem de código:  JavaScript  ( javascript )

A previousElementSiblingpropriedade retorna nullse o elemento atual for o primeiro da lista.

O exemplo a seguir usa a previousElementSiblingpropriedade para obter os irmãos anteriores do item da lista que possui a currentclasse:

let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;

console.log(prevSiblings);Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir seleciona todos os irmãos anteriores do item da lista que possuem a currentclasse:

let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {
    console.log(prevSibling);
    prevSibling = current.previousElementSibling;
}
Linguagem de código:  JavaScript  ( javascript )

Obtenha todos os irmãos de um elemento

Para obter todos os irmãos de um elemento, usaremos a lógica:

Primeiro, selecione o pai do elemento cujos irmãos você deseja encontrar.
Segundo, selecione o primeiro elemento filho desse elemento pai.
Terceiro, adicione o primeiro elemento a uma matriz de irmãos.
Quarto, selecione o próximo irmão do primeiro elemento.
Por fim, repita os passos 3 e 4 até que não haja mais irmãos. Caso o irmão seja o elemento original, pule o 3º passo.

A função a seguir ilustra as etapas:

let getSiblings = function (e) {
    // for collecting siblings
    let siblings = []; 
    // if no parent, return no sibling
    if(!e.parentNode) {
        return siblings;
    }
    // first child of the parent node
    let sibling  = e.parentNode.firstChild;
    
    // collecting siblings
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
    }
    return siblings;
};
Linguagem de código:  JavaScript  ( javascript )

Junte tudo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Siblings</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li class="current">Customer Support</li>
        <li>Careers</li>
        <li>Investors</li>
        <li>News</li>
        <li>About Us</li>
    </ul>
    
    <script>
        let getSiblings = function (e) {
            // for collecting siblings
            let siblings = []; 
            // if no parent, return no sibling
            if(!e.parentNode) {
                return siblings;
            }
            // first child of the parent node
            let sibling  = e.parentNode.firstChild;
            // collecting siblings
            while (sibling) {
                if (sibling.nodeType === 1 && sibling !== e) {
                    siblings.push(sibling);
                }
                sibling = sibling.nextSibling;
            }
            return siblings;
        };

        let siblings = getSiblings(document.querySelector('.current'));
        siblingText = siblings.map(e => e.innerHTML);
        console.log(siblingText);
    </script>
</body>
</html>
Linguagem de código:  HTML, XML  ( xml )

Saída:

["Home", "Products", "Careers", "Investors", "News", "About Us"]
Linguagem de código:  JSON/JSON com comentários  ( json )

Resumo

O nextElementSiblingretorna o próximo irmão de um elemento ou nullse o elemento é o último da lista.
Retorna previousElementSiblingo irmão anterior de um elemento ou nullse o elemento é o primeiro da lista.
Para obter todos os irmãos de um elemento, você pode usar uma função auxiliar que utiliza a nextElementSiblingpropriedade.