0

私はこのhtmlを持っていると言います

<div class="details">
    <div class="details">
        <div class="details">
            <div class="details"></div>
            <div class="details"></div>
        </div>        
        <div class="details">
            <div class="details"></div>
            <div class="details"></div>
        </div>
    </div>
</div>

レベルの数がわからなくても、他のすべてのレベルにクラスを追加する方法はありますか？

これが望ましい結果になります。

<div class="details">
    <div class="details alternate">
        <div class="details">
            <div class="details alternate"></div>
            <div class="details alternate"></div>
        </div>        
        <div class="details">
            <div class="details alternate"></div>
            <div class="details alternate"></div>
        </div>
    </div>
</div>

編集私は何も試したことがないように見えるので、そのような質問は嫌われていることを知っています。しかし、私は何を探すべきかわかりません

更新 同じレベルに複数の詳細divが存在する可能性があることを示すためにhtmlを更新しました

4

3 に答える 3

3

これは機能しますが、alternateクラスを 2 番目と偶数レベルではなく、1 番目のレベルとそれに続く奇数レベルに配置します。

$('.details').addClass(function() {
    if (!$(this.parentNode).hasClass('alternate')) {
         return 'alternate';
    }
});

代わりに、偶数レベルと奇数レベルの両方をマークするこれを使用できます。

$('.details').addClass(function() {
    return $(this.parentNode).hasClass('odd') ? 'even' : 'odd';
});

http://jsfiddle.net/P4ggZ/2/を参照

于 2013-02-21T16:18:00.253 に答える
3

各要素が持つ親の数を使用でき.details、偶数の場合は.alternateクラスを適用します

$('.details').filter(function(){
    return ($(this).parents('.details').length % 2) === 0;
}).addClass('alternate');

http://jsfiddle.net/Ltn2j/1/のデモ

于 2013-02-21T16:18:29.543 に答える
1

1) 純粋な CSS ソリューション:

レベルの数には最大値があると思いますので、使用できます

body > .details { }
body > .details > .details { }
body > .details > .details  > .details { }
...

ただし、スタイルが大きい場合、これは重くなる可能性があります。この場合、ミックスインが css を構築できるようにする形式 (たとえば、less ) を使用することをお勧めします。

2）jQueryソリューション（次の質問の編集）：

jQueryでスタイルを追加したい場合は、そうするかもしれません

function changeChilds($elems, depth) {
   if (!$elems.length) return;
   if (depth%2) $elems.addClass('alternate');
   changeChilds($elems.children('.details'), depth+1);
}
changeChilds($('body > .details'), 0);

デモンストレーション

于 2013-02-21T16:13:51.147 に答える