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 nextElementSibling
atributo:
let nextSibling = currentNode.nextElementSibling;
Linguagem de código: JavaScript ( javascript )
O nextElementSibling
retorno null
se o elemento especificado for o último da lista.
O exemplo a seguir usa a nextElementSibling
propriedade para obter o próximo irmão do item da lista que possui a current
classe:
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á
current
usando o arquivoquerySelector()
. - Segundo, obtenha o próximo irmão desse item da lista usando a
nextElementSibling
propriedade.
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 previousElementSibling
atributo:
let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;
Linguagem de código: JavaScript ( javascript )
A previousElementSibling
propriedade retorna null
se o elemento atual for o primeiro da lista.
O exemplo a seguir usa a previousElementSibling
propriedade para obter os irmãos anteriores do item da lista que possui a current
classe:
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 current
classe:
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
nextElementSibling
retorna o próximo irmão de um elemento ounull
se o elemento é o último da lista. - Retorna
previousElementSibling
o irmão anterior de um elemento ounull
se 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
nextElementSibling
propriedade.