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?
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;
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加