Introdução ao jQuery
4.3 Navegando no DOM
O jQuery oferece diversas funções que facilitam a navegação no DOM. Com a chamada de algumas funções é possível obter os nodos filhos de um elemento, acessar o elemento mais próximo, encontrar o próximo e o elemento anterior, dentre outras possibilidades.
A função parent()
Esta função retorna o elemento pai de um dado elemento. Considere o exemplo abaixo:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
div.destaque{background-color:lightblue;}
</style>
<script>
$(document).ready(function(){
$(".seleciona").click(function(){
$(this).parent().toggleClass("destaque");
});
});
</script>
</head>
<body>
<h4>Escolha seu destino</h4>
<div class="destino">
<input class="seleciona" type="checkbox"> <span>Porto Alegre</span>
</div>
<div class="destino">
<input class="seleciona" type="checkbox"> <span>Florianópolis</span>
</div>
<div class="destino">
<input class="seleciona" type="checkbox"> <span>Curitiba</span>
</div>
</body>
</html>
Toda vez que um click ocorrer na input "seleciona", a função parent() busca o ancestral direto da input, que no exemplo é a div "destino".
A função children()
Esta função retorna todos os nodos filhos de um elemento.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
span.destaque{color:red}
</style>
<script>
$(document).ready(function(){
$(".destino").bind("mouseover mouseout",
function(){
$(this).children().toggleClass("destaque");
});
});
</script>
</head>
<body>
<h4>Escolha seu destino</h4>
<div class="destino">
<span>Porto Alegre</span>
<span><b>|+| Mais informações</b></span>
</div>
<div class="destino">
<span>Florianópolis</span>
<span><b>|+| Mais informações</b></span>
</div>
</body>
</html>
Nesse exemplo, associamos dois eventos "mouseover" e "mouseout" às divs com classe ".destino". Quando o evento é disparado, todos os nodos filhos, no caso <span>, <span> e <b> são formatados com a classe "destaque". Essa função permite em uma só linha de comando atingir todos os nodos filhos de uma só vez, o que pode ser bastante útil quando não sabemos exatamente quantos nodos filhos existem.
A função next()
Esta função encontra o próximo elemento a partir de um dado elemento. Por exemplo, vamos criar um botão que ao ser clicado, seleciona o próximo elemento <li> de uma lista:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
li.destaque{background-color:yellow}
</style>
<script>
$(document).ready(function(){
var li_atual = $("#lista li:first");
$("#prox").click(function(){
$("li").removeClass("destaque");
$(li_atual).addClass("destaque");
li_atual = $(li_atual).next();
});
});
</script>
</head>
<body>
<h4>Melhores destinos</h4>
<button id="prox">Próximo >></button> <ul id="lista">
<li>Paris</li>
<li>Santiago</li>
<li>Londres</li>
<li>Buenos Aires</li>
</ul>
</body>
</html>
Nesse exemplo começamos inicializando a variável li_atual apontando para o elemento "<li>Paris</li>". Quando executamos $(li_atual).next() é equivalente àchamada $("<li>Paris</li>").next() . A função next() verifica se existe uma <li> que esteja adjacente à direita da li_atual , que no caso é "<li>Santiago</li>". Sendo assim, a li_atual é reconfigurada para apontar para " <li>Santiago</li>". Se houver novamente um click, o mesmo processamento ocorrerá, somente parando quando chegar em <li>Buenos Aires</li> pois nesse ponto não existe um elemento next(), ou seja, algum elemento adjacente à direita. Essa função é bastante interessante, pois não precisamos saber exatamente quantos elementos existem, basta chamar a função next para navegar ao próximo elemento. A condição de parada é quando next() retorna null, ou seja, quando não existem mais elementos próximos a serem visitados.
A função closest()
Esta função localiza o elemento mais próximo de um determinado elemento de acordo com o parâmetro especificado. Considere o exemplo a seguir:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
div.destaque{background-color:yellow}
</style>
<script>
$(document).ready(function(){
$(".seleciona").click(function(){
$(this).closest("div").toggleClass("destaque");
});
});
</script>
</head>
<body>
<h4>Escolha seu destino</h4>
<div class="destino">
<table>
<tr>
<td>
<input class="seleciona" type="checkbox">
</td>
<td>Paris</td>
</tr>
</table>
</div>
</body>
</html>
Observe que a função closest recebe como parâmetro o elemento alvo de sua busca. Nesse caso, estamos interessados em localizar a div "mais próxima" da checkbox. Essa div pode ser um ancestral direto (nodo pai) ou um ancestral indireto, como é o caso do exemplo (um ancestral de quarto grau td->tr->table->div). A função next vai gradualmente subindo na árvore DOM até encontrar a div mais próxima. Quando localizá-la, adiciona a classe destaque na mesma, caso ainda não possua.
Compare a função closest com a função parent. De fato, a função closest pode trazer o mesmo resultado da função parent, entretanto a função parent não consegue obter os mesmos resultados da função closest, pois parent sempre retorna o ancestral direto, enquanto que closest pode retornar o ancestral direto ou indireto.