Aplicar estilos distintos a los elementos de una lista con jQuery

Hoy me he encontrado con la necesidad de aplicar distintos estilos a cada uno de los elementos de una lista con jQuery y como me ha costado más de lo que esperaba, aquí os dejo las maneras que he encontrado por si alguna vez lo necesitáis.

Para el ejemplo he creado tres listas y las he metido cada una dentro de un div con un nombre diferente.

Código :

<div id="miLista1">
  <ul>
    <li>Primera</li>
    <li>Segunda</li>
    <li>Tercera</li>
    <li>Cuarta</li>
    <li>Quinta</li>
  </ul>
</div>
<div id="miLista2">
  <ul>
    <li>Primera</li>
    <li>Segunda</li>
    <li>Tercera</li>
    <li>Cuarta</li>
    <li>Quinta</li>
  </ul>
</div>
<div id="miLista3">
  <ul>
    <li>Primera</li>
    <li>Segunda</li>
    <li>Tercera</li>
    <li>Cuarta</li>
    <li>Quinta</li>
  </ul>
</div>

Le he dado un poco de formato y me he creado las clases que luego voy a aplicar con jQuery

Código :

ul{ list-style-type:none; margin:0; padding:0; font-size:10px; font-family:Tahoma, Geneva, sans-serif; margin-bottom:20px;}
li { padding:5px 0; border-bottom:solid 1px #ccc}
.clase1{ font-size:12px}
.clase2{ font-size:16px}
.clase3{ font-size:20px}
.clase4{ font-size:24px}
.clase5{ font-size:28px}

Ahora la idea es aplicar estas clases a cada uno de los elementos de la lista. Para eso jQuery nos da distintas maneras de hacerlo, como podéis ver aquí:

Código :

<script type="text/javascript">
var x;
x =$(document);
x.ready(inicializar);

function inicializar(){
lista1();
lista2();
}
function lista1(){
$('#miLista1 ul').children('li').addClass(function (i) {
return 'clase' + (i+1);
});
}
function lista2(){
   var clase="";
var x=$("#miLista2 li");
   x.each(function(i){
      clase="clase"+(i+1);
      $(this).addClass(clase);
   });    
}
</script>

Esto está bien, pero lo que yo necesitaba era aplicar un atributo css distinto a cada uno de los "li", porque no sabía cuantos elementos va a tener la lista ya que se creará de manera dinámica.

Para esto utilizamos de nuevo la función "each()" de jquery sólo que en cada ciclo modificamos el valor del atributo que vamos a aplicar a nuestro elemento.

Código :

<script type="text/javascript">
var x;
x =$(document);
x.ready(inicializar);

function inicializar(){
lista3();
}
function lista3(){
var x=$("#miLista3 li");
var numero=10;
var px="px";
   x.each(function(i){
      $(this).css("font-size", numero+px);
      numero+=4;
   });    
}
</script>

Ver ejemplo

Espero que os ayude.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.