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选择器我不知道可以解决这个问题。

如果我使用jQuery，我认为它可能会是这样的：

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

但我不确定如何擦除列表的其余部分并且每次都添加10px。我一直在使用'.next'和'.prev'的想法但不确定如何执行。

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

Answer 1

您可以使用each和index参数作为控件。我在这里使用了margin-left作为我的例子，但显然左边也会在你的情况下工作。

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;
});

jQuery + Css - 动态添加css到列表项

2 个答案: