Utilizing CSS for styling a class with a dynamic name

Question

Utilizing CSS for styling a class with a dynamic name

On the server side, I am dynamically generating class names like this:

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

I want the output to have indentation that looks like this:

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

The class name syntax is level_$i, where $i is a variable that can range from 1 to any level. How can I apply CSS to create this indentation in this scenario?

javascript jquery css

Answer 1

Answer №1

CSS doesn't support for loops, but you can use LESS instead. Check out this tutorial on LESS Loops

If you want to achieve the same effect with jQuery, take a look at this jsFiddle example I put together for you.

var i = 1,
    val = 0;

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

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

Answer 2

CSS doesn't support for loops, but you can use LESS instead. Check out this tutorial on LESS Loops

If you want to achieve the same effect with jQuery, take a look at this jsFiddle example I put together for you.

var i = 1,
    val = 0;

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

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

Answer 3

Answer №2

There are two possible solutions that I can suggest:

One option is to automatically generate CSS styles as you create the list using PHP
Another alternative is to utilize JavaScript/jQuery to parse elements and dynamically create the necessary rules. You can check out an example on JSBin: http://jsbin.com/zaviqeyavico/1/edit

Answer 4

There are two possible solutions that I can suggest:

One option is to automatically generate CSS styles as you create the list using PHP
Another alternative is to utilize JavaScript/jQuery to parse elements and dynamically create the necessary rules. You can check out an example on JSBin: http://jsbin.com/zaviqeyavico/1/edit

Utilizing CSS for styling a class with a dynamic name

Answer №1

Answer №2

Similar questions

Encountering a Typings Install Error When Setting Up angular2-localstorage in WebStorm

Modify the CSS property of a checkbox label when the checkbox is selected

Filtering Jquery datatable results by text

Add at the beginning of each row in the text area

- Prefixing with -webkit-transform and overlooking z-index

Utilizing external method to retrieve widget factory customization choices

Comparing json results from ng-repeat against an array

Concealing tooltip when button is clicked using jQuery

Using the .load() function to import an HTML file from the directory above

Are there any JavaScript charting tools that can draw in a clockwise direction with multiple data points?

Adjust the color according to the key's value in every object within the array

Unnecessary Page Diversion

Adding query parameters dynamically in Vue without refreshing the component

switching the content of an element using Javascript

tips for efficiently loading JSON files using Angular

What could be the reason for the loss of default browser focus on this accordion navigation?

What tool can be used for formatting and syntax highlighting when working with ejs (embedded javascript) templates?

Having trouble modifying the image source within a parent div that contains dynamic images? Let me assist you in fixing the Uncaught Syntax

How to Implement Flexbox Display Across Various Browsers Using jQuery?

React animation failing to render underline animation