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

【问题标题】：jQuery - select children on the same level (odd or even)jQuery - 选择同一级别的孩子（奇数或偶数）
【发布时间】：2009-12-12 07:09:40
【问题描述】：

有没有办法用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

【问题讨论】：

他对 .quote-body 元素的无限嵌套有疑问吗？ .. 对 css 有点困惑

标签： jquery css recursive-descent

【解决方案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

【讨论】：

我尝试了类似的方法，设置奇数类和偶数类，但使类依赖于父类。如果父项是奇数，则 $(this) 必须是偶数。这很大程度上取决于 $(".quote-body") 查找/返回元素的顺序
如果您觉得这很有用，请记得勾选正确答案:)
Sander，我也想过类似的事情，但是你必须先找到没有父 .quote-bodies 的元素，然后选择它们的直系子元素等。还有子元素。 quote-body 可能不是 immediate 孩子，所以这会使事情变得更加复杂.. :) 这种方法可能很慢，但至少它很短。

【解决方案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 元素。

【讨论】：

这只会递归到第一个孩子的第一个孩子，等等。
这不是真的。 children 函数返回当前选定元素的所有直接子元素，而不仅仅是第一个。我发布的脚本已经过测试，并且确实有效。回家后我会上传一个示例页面。
好的，你是对的，对此感到抱歉。我很困惑，因为 .children 没有出现来选择所有匹配元素的子元素（确实如此）
不用担心。人类编译器很难=P。无论如何，这是我承诺的工作示例：the-xavi.com/static/quotes.html