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

Angular's NgShoppingCart is designed in such a way that items stored in the localStorage are automatically cleared out

Having trouble dividing an HTML file?

Determine the character's position in an input field by tracking mouse movements

Attempting to initiate an AJAX request to an API

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Vue.js: Issue with dynamically calculating class property

What purpose does this particular express variable serve?

Navigating the issue of updateMany not functioning properly in mongoose and nodejs

The initial click may not gather all the information, but the subsequent click will capture all necessary data

Seeking out a particular key within a JSON object and then finding a match based on the id within that key's array - how can it be

Exploring the Integration of Google Maps and Angular Google Places in Angular 2

Confusion arises from conflicting Vue component script indentation guidelines

Utilize JavaScript libraries in a TypeScript project

How can I configure a unique error log format in Winston?

The retrieval of data from AWS Dynamodb in Node.js is not done synchronously

Ensuring the next tab is not accessible until all fields in the current tab are filled

Do not apply styling to a particular page in CSS and HTML

Tips for focusing on a background image without being distracted by its child elements

Storing Data Property Value from an Item in Rendered List Using Vue: A Quick Guide