如何使用JS / Jquery替換重復的CSS樣式 - 嵌套列表

Question

我正在制作一個嵌套列表，並希望懸停樣式覆蓋其容器的整個寬度。 為了做到這一點，我將刪除ul中的默認邊距並將padding-left應用於li內的div，但這意味着有很多低效的代碼。 見下文或DEMO

ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0;}
li > div:hover { background-color: #eee}

li div{padding-left:0px}
li li div{padding-left:20px}
li li li div{padding-left:40px}
li li li li div{padding-left:60px}

我無法繼續應用這些樣式，因為我正在創建一個文件樹，所以層次結構可以永遠持續下去。 有誰知道我可以在jQuery中做到這一點的有效方式？ 非常感謝

Answer 1

這里有一些代碼可以滿足您的需求：

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

它會計算ul的數量，直到您點擊根並添加填充。

小提琴： http ： //jsfiddle.net/MKK8v/26/

編輯：

由於性能問題，這里優化的代碼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')
})

而不是通過所有父節點循環每個div我檢查我放在data的ul索引。

小提琴： http ： //jsfiddle.net/MKK8v/33/