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

How to use JS/Jquery to replaces repeated CSS styles - Nested List

本文关键字：CSS 样式 列表 嵌套 JS 何使用 Jquery 替换      更新时间：2023-09-26

我正在制作一个嵌套列表，并希望悬停样式覆盖其容器的全部宽度。为了做到这一点，我正在从ul中删除默认的边距，并在li中应用padding-left到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中有什么有效的方法吗?非常感谢

这里有一小段代码可以做你想做的:

$('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索引i放在data中。

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

相关文章：