jQuery + Css - リストアイテムにCSSを動的に追加する

Question

リストアイテムを選択する方法がある場合、リストが進むにつれて慎重にCSS値を追加するのかと思います。

とても私が表示され、たとえばましょう説明するのは難しいです：

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

私はこのような動的に生成されたリストを利用したいと

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

だろう、私はこれがあるかどうかわからないんだけどjQueryで最もうまくやっている、あるいはCSSセレクタのタイプがある場合は、これについてはわからない。

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

しかし、私は、リストの残りの部分をスクラブと10pxのたびに追加し続ける方法がわからないです：私はjQueryのを使用した場合

、私はそれがこのような何かを行くかもしれないと思います。私は '.next'と '.prev'を使用するアイデアを演奏してきましたが、実行方法は不明です。

ご迷惑をおかけして申し訳ありませんが、私はjQueryの初心者です。

Answer 1

あなたがコントロールとしてeachとインデックスパラメータを使用することができます。私は余裕を使ってここに私の例を残しましたが、明らかに残ったのはあなたの場合でもうまくいくでしょう。

http://jsfiddle.net/nEePk/

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

限り唯一のCSSの手段として、私はこれが可能になるとは思いません。理由は、実際の式で実行できる数学がないということです。あなたは確かに直接的な兄弟セレクタを使用してliをそれぞれ選択することができます。

li ~ li { ... } 

Answer 2

は、常に次のような何かができる：

var left = 0; 

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