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

- grzes

---

这是关于 .quote-body 元素无限嵌套的问题吗？对 CSS 有点困惑。 - Scott Evernden

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

- Tatu Ulmanen

---

我尝试了类似的东西，设置奇数和偶数类，但是使类依赖于父类。如果父类为奇数，则$(this)必须为偶数。但这在$(".quote-body")查找/返回元素的顺序上有很大的影响。 - Sander Rijken

请记得勾选答案为“正确答案”如果您觉得这个回答有帮助:) - Tatu Ulmanen

Sander，我也想到了类似的方法，但你需要先找到没有父级.quote-bodies元素，然后选择它们的直接子元素等。而子级.quote-bodies可能不是直接子元素，这会更加复杂.. :) 这种方法可能会比较慢，但至少很简短。 - Tatu Ulmanen

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元素。

- Xavi

---

这将仅递归到第一个子元素的第一个子元素，以此类推。 - Sander Rijken

这不是真的。children函数返回当前选定元素的所有直接子元素，而不仅仅是第一个。我发布的脚本已经经过测试，它确实可以工作。我回家后会上传一个示例页面。 - Xavi

好的，你是对的，对此感到抱歉。我有些困惑，因为.children 似乎 没有选取所有匹配元素的子元素（实际上它确实有）。 - Sander Rijken

没关系。做人类编译器很难 =P。无论如何，这是我承诺的工作示例：http://www.the-xavi.com/static/quotes.html - Xavi