CODEWITHSUNDEEP
javascriptjquerycssautomationclassname
Blundering Philosopher
Blundering Philosopher

Reputation: 6805

How to define changing css property based on incrementing class names?

I've looked around and haven't seen this question answered before, so please forgive me if I'm mistaken.

What I have is a text string given by a user that can basically be anything. I split the string by newline characters, "\n", so I differentiate between ideas in the text. I want to put each idea into a <span>, and have each span be spaced from the left side of the screen using left: number-of px. The problem I am running into is that I want the spacing to be dependent on the number of underscores starting out each idea. So if one idea is "_Blah blah", the css should be left: 5px, and if the idea is "__Blah blah", the css should be left: 10px.

Right now my code picks out the number of underscores at the beginning of each idea and creates a className in the span that the idea will be put into.

I know this is doable by having lots of css properties like this:

.lvl1-1 {
    left: 0px;
}
.lvl1-2 {
    left: 5px;
}
.lvl1-3 {
    left: 10px;
}
... and so on

But because the text is unknown, and there may be infinite levels and sub-levels, I would appreciate it if I could have some css field or something that will auto-increment the left property depending on the className. Is this possible? Thanks for any help!

Here's a demo that may be useful: Fiddle

Upvotes: 0

Views: 620

Answers (1)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

Using comments from @LowerClassOverflowian, @srekoble and @AndreiVolgin, I came up with this solution:

var newDiv = $('<div></div>')
    .text(lines[i])
    .css({
        'margin-left':(underscoreCount * 5) + 'px'
    });
$('#div-text').append(newDiv);

Where underscoreCount is the number of underscores in each idea, lines[i] is the idea being added, and div-text is the id of the div containing the added divs.

Upvotes: 1

Related Questions