Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

jQuery 1.4 nextUntil, prevUntil e parentsUntil

Publicado em: 2010-01-15 — 13.252 visualizacoes

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:

  1. Joomla avançado
  2. Guia Mangá de banco de dados
  3. 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
  4. Expressões regulares
  5. 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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.

10 comentários na matéria: “jQuery 1.4 nextUntil, prevUntil e parentsUntil”

  1. Rodolfo PereiraNo Gravatar disse:

    Otimo Post !!!

  2. Simone CamposNo Gravatar disse:

    Parabéns pelo post.
    Muito bom o seu blog.

  3. miltoncpsNo Gravatar disse:

    Muito bom!
    Conhecia seu site maujor e agora estou viciado no seu blog!

    Parabens!

  4. Lucas MonteiroNo Gravatar disse:

    Muito Bom mesmo!

    Vllw =]

  5. FagnerNo Gravatar disse:

    Sou da Zona Norte de Porto Alegre
    Parabéns pelo blog.
    Sempre quando eu posso eu volto aqui.
    Abraços

  6. Tiago César OliveiraNo Gravatar disse:

    Obrigado Maujor, bem esclarecedora a matéria!

    Estou no aguardo do seu livro de javascript, deixe-nos a par do processo de desenvolvimento!

  7. Pablo PinheiroNo Gravatar disse:

    Parabens maujor como sempre , com otemas materias e dicas.

  8. SantosNo Gravatar disse:

    Já tinha lido sobre, mas não entendido, sua explicação está bem esclarecedora, grato Maujor!

  9. Alexandre MattosNo Gravatar disse:

    Vlw majour!!!

    Tinha conferido a matéria da versão 1.4 no site no Nettuts (inglês).
    Vlw mesmo pelo conteúdo em português e os exemplos … abraços!

  10. HazNo Gravatar disse:

    Bom, nada do que já não se pudesse fazer antes com algumas linhas a mais. Mas assim já facilita o trabalho.

    Valeu pelo post, Maujor.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo