javascript - 如何根据递增的类名定义更改的 css 属性？

Question

我环顾四周，之前没有看到这个问题的答案，所以如果我弄错了，请原谅我。

我所拥有的是用户提供的文本字符串，基本上可以是任何内容。我用换行符拆分字符串，"\n" ，所以我区分了文本中的想法。我想把每个想法都写成一个 <span> , 并使用 left: number-of px 将每个跨度与屏幕左侧隔开.我遇到的问题是我希望间距取决于开始每个想法的下划线数量。所以如果一个想法是"_Blah blah" ，CSS 应该是 left: 5px , 如果想法是 "__Blah blah" ，CSS 应该是 left: 10px .

现在，我的代码会在每个想法的开头挑选出下划线的数量，并在将要放入该想法的范围内创建一个类名。

我知道有很多这样的 css 属性是可行的:

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

但是因为文本是未知的，并且可能有无限的层次和子层次，如果我能有一些 css 字段或者会根据 className 自动增加左属性的东西，我将不胜感激。这可能吗？感谢您的帮助!

这是一个可能有用的演示:Fiddle

Answer 1

根据@LowerClassOverflowian、@srekoble 和@AndreiVolgin 的评论，我想到了这个解决方案:

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

其中underscoreCount是每个idea中下划线的数量，lines[i]是被添加的idea，div-text是包含添加的 div 的 div 的 id。