Question

说我有这个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>

EDIT 我知道这些问题令人不悦，因为我似乎没有尝试任何东西。但我不知道该找什么

更新更新了html，以显示同一级别上可能有多个详细信息div

Answer 1

虽然将alternate类放在第一级和后续的奇数级别，而不是第二级甚至是偶数，但这样做有效：

$('.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/

Answer 2

您可以使用每个元素拥有的.details个父母的数量，如果是偶数，则应用.alternate类

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

演示 http://jsfiddle.net/Ltn2j/1/

Answer 3

1）纯CSS解决方案：

我认为你的关卡数量最多，所以你可以使用

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

但如果风格很大，这可能会变得沉重。在这种情况下，您最好使用允许mixins构建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);

Demonstration

jQuery addClass用于交替级别的子元素

3 个答案: