Javascript 在具有变量名的类上应用CSS

我从服务器端生成类名，如下所示：

<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_3">List item 3</p>
<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_1">List item 1</p>

---

类名的语法类似于

level_$i

，其中

$i

是可变的，它可以转到任何级别（从1到n）。那么，在这种情况下，我如何将CSS应用于缩进呢？

在纯CSS中，循环是无法实现的。考虑使用这个目的。这里有一个关于LESS的教程

您可以使用jQuery实现这一点。。。看看我为你准备的

var i= 1,
    val= 0;

$('[class^=level_]').each(function(){

$('.level_' + i).css('padding-left',val+'px');
    i++;
    val += 20;
});

我可以看到两种解决方案：

您可以在生成列表时自动生成CSS样式（使用PHP）

您可以使用javascript/jquery解析元素并动态创建适当的规则。这里是JSBin：

---

在浏览器中使用less.js对开发很有好处，但不建议在生产中使用它

-官方文档如果CSS中没有针对这种情况的解决方案，那么建议我以何种方式从服务器返回类名？再次。。。单凭CSS是无法做到的。。。您使用的是哪种服务器端编程语言？是否可以使用jQuery来完成，以便在加载DOM时创建CSS？我在服务器端使用Perl。请参阅编辑。。。使用jQuery发布了问题的答案。。。让我知道这是否是你打算做的…谢谢。我更喜欢jQuery:）

var i= 1,
    val= 0;

$('[class^=level_]').each(function(){

$('.level_' + i).css('padding-left',val+'px');
    i++;
    val += 20;
});