Javascript 如何基于递增的类名定义更改的css属性？

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

我所拥有的是一个用户给出的文本字符串，它基本上可以是任何东西。我用换行符分隔字符串，

“\n”

，因此我区分文本中的想法。我想将每个想法放入一个

，并使用

left:number of px

将每个跨度与屏幕左侧隔开。我遇到的问题是，我希望间距取决于每个想法开头的下划线数量。因此，如果一个想法是

“u Blah Blah”

，css应该是

左：5px

，如果想法是

“u Blah Blah”

，css应该是

左：10px

现在，我的代码在每个想法的开始处选择下划线的数量，并在想法将被放入的范围内创建一个类名

我知道这是可行的，因为有很多css属性，比如：

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

但是因为文本是未知的，并且可能有无限的级别和子级别，如果我能有一些css字段或一些根据类名自动递增left属性的内容，我将不胜感激。这可能吗？谢谢你的帮助

---

下面是一个可能有用的演示：

使用@LowerCassOverflovian、@srekoble和@AndreiVolgin的评论，我提出了以下解决方案：

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

var newDiv=$（“”）
.文本（第[i]行）
.css({
“左边距”：（下划线计数*5）+“px”
});
$（'#div text'）。追加（newDiv）；

---

其中，

下划线计数

是每个想法中的下划线数，

行[i]

是要添加的想法，

div text

是包含添加div的div的id。

您只能使用3个类：.lvl-1:5px、lvl-2:10px和lvl-3:15px。这里有一个例子：@srekoble，我可以有3个以上的子级别。但你的简化是错误的helpful@LowerClassOverflowian-你是说当我创建我能做的每个元素时是正确的吗？你真的必须使用类吗？为什么不直接更改元素的样式呢？@Fabricio在本例中，不需要。但稍后我需要通过类名访问这些元素。或者使用代替，并简单地设置边距-left@AndreiVolgin-因此不需要

position:relative

？并且如果在code中设置position，则不需要为跨度使用CSS类。Div是一个块元素。您不应该将span用于您试图完成的任务。