jQuery Css – 动态添加css到列表项

前端之家收集整理的这篇文章主要介绍了jQuery Css – 动态添加css到列表项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否有一种方法可以选择列表项,随着列表的继续添加一个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的新手.

@R_502_323@

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

http://jsfiddle.net/nEePk/

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

就CSS而言,我认为这不可行.原因是没有数学可以在实际表达式中完成.你当然可以使用直接兄弟选择器选择每个li.

li ~ li { ... }
原文链接:https://www.f2er.com/jquery/241427.html

猜你在找的jQuery相关文章