Olá todo mundo, hoje eu vou explicar como adicionar classes diferentes para itens de listagem com jQuery, essa dica é muito útil quando vocês precisam adicionar uma classe personalizada para cada item da sua listagem.
Por exemplo: Você não pode alterar manualmente um “plugin” para que o mesmo tenha classes diferentes em uma listagem de post mais lidos, por causa que no futuro quando você for atualizar o mesmo, você irá perde tudo o que você alterou nele e terá o retrabalho de fazer tudo novamente, então com esse jQuery ele criará uma classe automaticamente para cada um dos itens da sua listagem.
Vamos começar a nossa listagem usando uma <UL> juntamente com uma ID, é muito importante que tenha uma ID a nossa listagem, porque sem a mesma o nosso jQuery não irá funcionar corretamente.
<ul id="listagem"> <li>Primeiro Item</li> <li>Segundo Item</li> <li>Terceiro Item</li> <li>Quarto Item</li> <li>Quinto Item</li> </ul>
Como vocês podem ver eu coloquei a nossa ID como “listagem”, mas isso pode variar para cada caso, depois dessa parte vamos colocar o nosso jQuery:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#listagem > li").addClass(function(i){return "item-" + (i + 1);});
});
</script>
MUITO IMPORTANTE: Verifique se o seu sistema esta chamando uma galeria jQuery, senão adicione esse código dentro do seu <head>
<script src="https://code.jquery.com/jquery.min.js" type="text/javascript"></script>
Vocês viram que eu coloquei “#listagem > li”, porque assim eu falo para cada “li” dentro do meu ID “#listagem” irá receber uma classe diferente. Reparem que após do “return” esta escrito assim: “item-” + (i + 1) o que isso significa???
Isso significa que cada item irá receber o nome de ITEM- e no fim de cada um irá multiplicar “+1”, ele ficará assim item-1, item-2, etc. Deem uma olhada no exemplo abaixo para que fique mais simplificado:
<ul id="listagem"> <li class="item-1">Primeiro Item</li> <li class="item-2">Segundo Item</li> <li class="item-3">Terceiro Item</li> <li class="item-4">Quarto Item</li> <li class="item-5">Quinto Item</li> </ul>
Lembrando que vocês podem alterar o “ITEM-“ por qualquer outro coisa que vocês desejarem, só não pode utilizar caracteres especiais como acentuação ou espaços em branco, porque pode ocasionar erros no seu jQuery.
Pode parecer um pouco complicado vendo assim, então por isso que eu vou deixar um link para download, para que assim fique mais facil de entender como fica o resultado final:
Espero que vocês tenham gostado deste post e até breve, por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais…
