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:

  
Joomla avançado
  
Guia Mangá de banco de dados
    
Livros do Maujor
      

       
Construindo sites com CSS e (X)HTML
       
Livros jQuery
         

           
jQuery - A biblioteca do programador JavaScript
           
AJAX com jQuery
         
       
       
Criando sites com HTML
      
    
  
Expressões regulares
  
PHP e MySQL

<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

Esta matéria foi publicada em: 2010-01-15 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2010/01/15/jquery-1-4-nextuntil-prevuntil-e-parentsuntil/trackback no seu site.