Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

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

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

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 http://www.maujor.com/blog/2010/01/15/jquery-1-4-nextuntil-prevuntil-e-parentsuntil/trackback no seu site.