Question

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

我所拥有的是用户给出的文本字符串，基本上可以是任何东西。我用换行符"\n"分割字符串，所以我区分了文本中的想法。我想将每个想法放入<span>，并使用left: number-of px将每个跨距与屏幕左侧隔开。我遇到的问题是我希望间距取决于开始每个想法的下划线数量。因此，如果一个想法是"_Blah blah"，则css应为left: 5px，如果想法为"__Blah blah"，则css应为left: 10px。

现在我的代码在每个想法的开头挑出下划线的数量，并在想法将被放入的范围内创建一个className。

我知道这可以通过像这样拥有大量的css属性来实现：

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

但是因为文本是未知的，并且可能存在无限级别和子级别，所以如果我可以有一些css字段或者根据className自动增加left属性的话，我将不胜感激。这可能吗？谢谢你的帮助！

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

Answer 1

使用@LowerClassOverflowian，@ ssskoll和@AndreiVolgin的评论，我提出了这个解决方案：

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

underscoreCount是每个想法中下划线的数量，lines[i]是要添加的想法，而div-text是包含添加的div的div的ID。

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

1 个答案: