Jquery – Selecionando elementos em uma lista

Em uma lista com 5 elementos, por exemplo, como selecionar o primeiro? E o último? E o terceiro? Segue a seguir um resumindo básico de maneiras para se encontrar um determinado elemento em uma lista.

Criando uma lista qualquer, como:

[sourcecode language=”html”] <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
[/sourcecode]

Nossa tarefa será adicionar uma classe qualquer somente aos elementos que queremos.

Último elemento:
[sourcecode language=”html”] $(‘li:last’).addClass(‘newClass’);
[/sourcecode]

Primeiro elemento:
[sourcecode language=”html”] $(‘li:last’).addClass(‘newClass’);
[/sourcecode]

#-ésimo elemento:
[sourcecode language=”html”] $(‘li:nth-child(#)’).addClass(‘newClass’);
[/sourcecode]

ou

[sourcecode language=”html”] $(‘li:eq(#)’).addClass(‘newClass’);
[/sourcecode]

Nesse último caso a lista julga que o primeiro elemento tem valor zero.

Elementos de posição par:
[sourcecode language=”html”] $(‘li:even’).addClass(‘newClass’);
[/sourcecode]

Elementos de posição ímpar:
[sourcecode language=”html”] $(‘li:odd’).addClass(‘newClass’);
[/sourcecode]

Lembre-se que a posição inicial é a posição zero e que zero é par! 🙂
Altere sua lista de forma que adicione um id em alguns elementos:

[sourcecode language=”html”] <ul>
<li>1</li>
<li id="dois">2</li>
<li>3</li>
<li id="quatro">4</li>
<li>5</li>
</ul>
[/sourcecode]

Agora selecionaremos somente os elementos li aonde id=”xxxx”. Faça o teste!
[sourcecode language=”html”] $(‘li [id=xxxx]’).addClass(‘newClass’);
[/sourcecode]

Altere sua lista incluindo alguns links e também um link externo à lista:
[sourcecode language=”html”] <a href="#"> Link!</a>
<ul>
<li><a href="#">1</a></li>
<li id="dois"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li id="quatro">4</li>
<li>5</li>
</ul>
[/sourcecode]

Para adicionar uma nova classe somente aos links dentro da lista, utilize:
[sourcecode language=”html”] $(‘li>a’).addClass(‘newClass’);
[/sourcecode]

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// 1 Comentário

  • Responder setembro 13, 2011

    Kacy

    Didn’t know the forum rules allowed such brilialnt posts.

// Siga as boas práticas: Comente!