jQuery + Css - Agregar css dinámicamente a los elementos de la lista

Question

Me pregunto si hay una manera de seleccionar elementos de la lista y agregar un valor css a medida que avanza la lista.

Es difícil de explicar, así que permítanme mostrar y ejemplo:

<ul class="list"> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
.... 
</ul> 

me gustaría tener una lista generada dinámicamente como este y

<ul class="list"> 
    <li style="left:0px;"></li> 
    <li style="left:10px;"></li> 
    <li style="left:20px;"></li> 
    <li style="left:30px;"></li> 
    .... 
</ul> 

No estoy seguro si esto es mejor hecho con jQuery, o si hay un tipo de selector de CSS que no conozco que podría llevarlo a cabo.

Si tuviera que usar jQuery, creo que podría ser algo como esto:

$('.list > li:nth-child(2)').css('left', '+=10px').next 

Pero no estoy seguro de cómo fregar por el resto de la lista y seguir añadiendo 10px cada vez. He estado jugando la idea de usar '.next' y '.prev' pero no estoy seguro de cómo ejecutarlo.

Gracias de antemano por su paciencia, soy un novato en jQuery.

Answer 1

Puede utilizar each y el parámetro de índice como un control. Utilicé margen, dejé aquí para mi ejemplo, pero obviamente la izquierda también funcionará en su caso.

http://jsfiddle.net/nEePk/

$('li').each(function(index) { 
    $(this).css('margin-left', index * 10); 
});​ 

En cuanto a un CSS sólo significa, no creo que esto sea posible. La razón es que no hay matemática que se pueda hacer en la expresión real. Sin embargo, puede seleccionar cada li usando el selector de hermanos inmediato.

li ~ li { ... } 

Answer 2

siempre se puede hacer algo como lo siguiente:

var left = 0; 

$('.list > li').each(function() { 
    $(this).css('left', left + 'px'); 
    left += 10; 
});