我正在制作一个嵌套列表,希望悬停样式能够覆盖其容器的整个宽度。为了做到这一点,我从 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 中执行此操作的有效方法吗?非常感谢
最佳答案
这里有一些代码可以做你想做的事:
$('div:not(:first)').each(function(){
var numEl = $(this).parentsUntil('div:first', 'ul').length - 1;
$(this).css('padding-left', numEl * 20 +'px')
})
它计算 ul
的数量,直到您找到根并添加填充。
fiddle :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
索引。
fiddle :http://jsfiddle.net/MKK8v/33/
关于javascript - 如何使用JS/Jquery替换重复的CSS样式——嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16821221/