我想知道是否有一种方法可以选择列表项,随着列表的继续添加一个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的新手.
解决方法
您可以使用each和index参数作为控件.我在这里使用margin-left作为我的例子,但显然左边也会在你的情况下工作.
$('li').each( function(index) {
$(this).css('margin-left',index * 10);
});
就CSS而言,我认为这不可行.原因是没有数学可以在实际表达式中完成.你当然可以使用直接兄弟选择器选择每个li.
li ~ li { ... }
