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:
<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]
