将CSS应用于具有变量名的类

Question

I'm generating class name from server side like:

<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>

and I expect the output with indentation such that it looks like:

List item 1
   List item 2
      List item 3
List item 1
   List item 2
List item 1

The syntax for class name is like level_$i where $i is variable and it can go to any level (starting from 1 to n). So how can I apply CSS for indentation in this situation?

Answer 1

You can't do for loops in pure CSS. Consider using LESS for that purpose. Here's a tutorial on LESS Loops

You can achieve this using jQuery ... see the jsFiddle example I prepared for you.

var i= 1,
    val= 0;

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

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

Answer 2

I can see 2 solutions:

1. You can generate CSS style automatically while you are generating list (using PHP)
2. You can use javascript/jquery to parse elements and create appropriate rules dynamically. Here's JSBin: http://jsbin.com/zaviqeyavico/1/edit