6

リストの項目を選択して、リストが進むにつれて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セレクターのタイプがあるかどうかはわかりません。

jQueryを使用する場合は、次のようになると思います。

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

しかし、リストの残りの部分をスクラブして、毎回1​​0pxを追加し続ける方法がわかりません。私は「.next」と「.prev」を使用するというアイデアをプレイしてきましたが、実行方法がわかりません。

しばらくお待ちいただきますようお願いいたします。私はjQueryの初心者です。

4

2 に答える 2

8

eachとインデックスパラメータをコントロールとして使用できます。ここでは例としてmargin-leftを使用しましたが、あなたの場合も明らかにleftだけで機能します。

http://jsfiddle.net/nEePk/

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

CSSが意味する限り、これは不可能だと思います。その理由は、実際の式で実行できる数学がないためです。liただし、直接の兄弟セレクターを使用して、それぞれを確実に選択できます。

li ~ li { ... }
于 2012-05-05T17:41:47.433 に答える
3

常に次のようなことをすることができます：

var left = 0;

$('.list > li').each(function() {
    $(this).css('left', left + 'px');
    left += 10;
});
于 2012-05-05T17:41:16.123 に答える