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

但我不确定如何浏览列表的其余部分并每次都添加 10px。我一直在玩使用“.next”和“.prev”的想法，但不确定如何执行。

提前感谢您的耐心等待，我是 jQuery 的新手。

4

2 回答 2

8

您可以使用each和索引参数作为控件。我在这里使用了 margin-left 作为我的示例，但显然 just 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 回答