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
[css:1:3be95896ca]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}
[/css:1:3be95896ca]

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.

Enviar comentario

via Cristalab http://ift.tt/1cgr4z7

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: