jQuery 1.4 nextUntil, prevUntil e parentsUntil

A versão 1.4 da biblioteca jQuery, lançada em 14 de janeiro de 2010, além de ter incrementado a performance da biblioteca, não só aperfeiçoou várias funcionalidades existentes como também introduziu novas funcionalidades.

Nesta matéria mostrarei três das novas funcionalidades denominadas genericamente de “jQuery Untils”. “Until” em inglês significa “até” e os métodos foram denominados nextUntil(), prevUntil() e parentsUntil() que como os nomes sugerem se destinam a:

 

• nextUntil: selecionar tudo o que estiver depois de um elemento até um determinado elemento exclusive;
• prevUntil: selecionar tudo o que estiver antes de um elemento até um determinado elemento exclusive;
• parentsUntil: selecionar todos os elementos-ancestrais de um elemento até um determinado ancestral exclusive;

Estes métodos já existiam em forma de plugin e agora foram incorporados nativamente na biblioteca. Eles fornecem uma maneira mais flexível da seleção proporcionada pelos métodos já existentes em versões anteriores nextAll(), prevAll() e parents(), que se destinam a selecionar tudo antes, tudo depois e todos os ancestrais. Os novos métodos permitem interromper a seleção, retornando um subconjunto de tudo.

Método nextUntil

Para demonstrar este método considere a marcação e script mostrados a seguir:

<ol id="lista-um">
 <li>Construindo sites com CSS e (X)HTML</li>
 <li>Criando sites com HTML</li>
 <li>jQuery - A biblioteca do programador JavaScript</li>
 <li>AJAX com jQuery</li>
 <li>Joomla avançado</li>
 <li>Guia Mangá de banco de dados</li>
 <li>Expressões regulares</li>
 <li>PHP e MySQL</li>
</ol>

<script type="text/javascript"> 
$(document).ready(function(){
 $('#lista-um li:nth-child(2)')
 .nextUntil('li:last-child')
 .css('color', 'red'); 
});
</script>

A seleção se faz para todos os item da lista que estão depois do segundo item (li:nth-child(2)) até o último item (li:last-child) exclusive. A seleção é para os itens 3 até 7

Para demonstração online consulte a página: jQuery 1.4 Untils

Método prevUntil

Para demonstrar este método considere a marcação e script mostrados a seguir:

<ol id="lista-dois">
 <li>Construindo sites com CSS e (X)HTML</li>
 <li>Criando sites com HTML</li>
 <li>jQuery - A biblioteca do programador JavaScript</li>
 <li>AJAX com jQuery</li>
 <li>Joomla avançado</li>
 <li>Guia Mangá de banco de dados</li>
 <li>Expressões regulares</li>
 <li>PHP e MySQL</li>
</ol>

<script type="text/javascript"> 
$(document).ready(function(){
 $('#lista-dois li:nth-child(6)')
 .prevUntil('li:first-child')
 .css('color', 'red'); 
});
</script>

A seleção se faz para todos os item da lista que estão antes do sexto item (li:nth-child(6)) até o primeiro item (li:first-child) exclusive. A seleção é para os itens 2 até 5

Para demonstração online consulte a página: jQuery 1.4 Untils

Método parentsUntil

Para demonstrar este método considere a marcação e script mostrados a seguir:

<ol id="lista-tres">
 <li>Joomla avançado</li>
 <li>Guia Mangá de banco de dados</li>
 <li>Livros do Maujor
 <ul>
 <li>Construindo sites com CSS e (X)HTML</li>
 <li>Livros jQuery
 <ul>
 <li>jQuery - A biblioteca do programador JavaScript</li>
 <li class="ajax">AJAX com jQuery</li>
 </ul>
 </li>
 <li>Criando sites com HTML</li>
 </ul>
 </li>
 <li>Expressões regulares</li>
 <li>PHP e MySQL</li>
</ol>

<script type="text/javascript"> 
$(document).ready(function(){
 $('#lista-tres .ajax')
 .parentsUntil('#lista-tres')
 .css('color', 'red');
});
</script>

A seleção se faz para todos os ancestrais do item na #lista-tres cuja classe é “ajax” (#lista-tres .ajax) até o ancestral #lista-tres exclusive.

Nota: Poderíamos nos livrar da classe “ajax” usando o seletor: $('#lista-tres ul ul li:last-child')

Para demonstração online consulte a página: jQuery 1.4 Untils