3

入れ子になったリストを作成していますが、ホバー スタイルがそのコンテナーの全幅をカバーするようにしたいと考えています。これを行うために、ul からデフォルトのマージンを削除し、li 内の div に padding-left を適用していますが、非効率的なコードがたくさんあることを意味します。以下またはデモを参照してください

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をチェックします。uldata

フィドル: http://jsfiddle.net/MKK8v/33/

于 2013-05-29T18:39:33.803 に答える