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>

编辑我知道这样的问题是不受欢迎的，因为我似乎没有尝试过任何事情。但我不知道要寻找什么

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

4

3 回答 3

3

这可行，尽管将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/

于 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 { }
...

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

示范

于 2013-02-21T16:13:51.147 回答