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

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 的父元素的数量，并取模 2 来定义奇数或偶数。

编辑

测试和工作精美。这种方法在复杂的文档上可能有点迟钝，因为对于每个元素，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包含元素的直接子元素的元素。