Question

有没有办法用jQuery替换下面的CSS？

.quote-body .quote-body { background: #f5f5f5 }
.quote-body .quote-body .quote-body { background: #fff }
.quote-body .quote-body .quote-body .quote-body { background: #f5f5f5 }
.quote-body .quote-body .quote-body .quote-body .quote-body { background: #fff }
...
and so on

Answer 1

这样的事可能有用：

$('.quote-body').each(function() {
    $(this).addClass($(this).parents('.quote-body').size() % 2 ? 'odd' : 'even');
});

对于每个.quotebody元素，找到具有类.quotebody的父元素的数量，并取两个模数来定义奇数或偶数。

修改

经过测试和工作精美。对于每个元素，这个方法在复杂文档上可能有点迟缓，jQuery必须一直遍历到根元素。但它确实有效。

工作示例：http://www.ulmanen.fi/stuff/oddevenchild.php

Answer 2

我想不出一个可以解决这个问题的简单选择器，但你可以使用while循环来实现预期的结果：

var $quotes = $(<containing-elem>).children(".quote-body"), level = 0;

while($quotes.length > 0) {
    $quotes.css("background-color", (level % 2 ? "#f5f5f5" : "#fff"));
    level += 1;
    $quotes = $quotes.children(".quote-body");
}

为了确保您最初没有选择太多.quote-body元素，我首先选择包含元素的直接子元素的.quote-body元素。

jQuery - 选择同一级别的孩子（奇数或偶数）

2 个答案: