3

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

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 中做到这一点的有效方法？非常感谢

4

1 回答 1

4

这里有一个小代码可以做你想做的事：

$('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检查ul我放置在data.

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

于 2013-05-29T18:39:33.803 回答