Javascript 如何使用JS/Jquery替换重复的CSS样式-嵌套列表

我正在制作一个嵌套列表，希望悬停样式覆盖其容器的整个宽度。为了做到这一点，我删除了ul中的默认边距，并对li中的div应用了左填充，但这意味着有很多低效的代码。见下文或

---

我无法继续应用这些样式，因为我正在创建一个文件树，以便层次结构可以永远继续下去。有人知道我可以在jQuery中高效地实现这一点吗？非常感谢

这里有一段代码可以满足您的需要：

$('div:not(:first)').each(function(){
    var numEl = $(this).parentsUntil('div:first', 'ul').length - 1;
    $(this).css('padding-left', numEl * 20 +'px')
})

它计算

ul

的数量，直到您点击根并添加填充

小提琴：

编辑：

由于性能问题，这里的优化代码是faste的10倍：

$('ul').each(function(){
    var $this = $(this);
    var index = $this.parents('ul').length == 0 ? 0 : getIndex($this);
    $this.data('index', index);
})

function getIndex(el){
    return parseInt(el.parents('ul').first().data('index'))+1
}

$('div:not(:first)').each(function(){
    var numEl = $(this).closest('ul').data('index');
    $(this).css('padding-left', numEl * 20 +'px')
})

我检查

数据中的
ul
索引，而不是每个
div循环遍历所有父级

Fiddle:
您是否已经设置好将li标记动态添加到html中（这样您只需要为其设置样式）？您的意思是在添加的每个li中都包含内联样式吗？我更喜欢一种方法，它可以计算每个li，并为其内部的跨度提供适当的填充。也许我不明白你的意思？不，我只是想知道你已经解决了多少问题。啊，我正要建议使用.css（）方法，是的，这会满足你的需要。看起来这会达到目的。你知道这种方法有多有效吗？因为层次结构可能变得非常大，所以它应该是O（n），其中n是列表项的数量。我的意思是，函数的速度与列表项的数量成线性关系。它必须为每个匹配的列表项调用，并有机会访问DOM。因此，如果有1000个列表项，它将对DOM进行1000次调用。它的效率不如他最初的硬编码CSS，但显然硬编码CSS根本无法扩展。我认为这应该是相当快的，除非你处理的是非常庞大的列表（想想数百万个）。第一行变成：
$（'ul.tree'）.data（'index'，0）。find（'ul'）。each（function（）{}
）并将该行（
var index=$this.parents（'ul'）。length==0？0:getIndex（$this）；
）更改为：
var index=getIndex（$this）；
。Fiddle:
$('ul').each(function(){
    var $this = $(this);
    var index = $this.parents('ul').length == 0 ? 0 : getIndex($this);
    $this.data('index', index);
})

function getIndex(el){
    return parseInt(el.parents('ul').first().data('index'))+1
}

$('div:not(:first)').each(function(){
    var numEl = $(this).closest('ul').data('index');
    $(this).css('padding-left', numEl * 20 +'px')
})