css 选择器 vs jquery 遍历答案

【问题标题】：css selectors vs jquery traversalcss 选择器 vs jquery 遍历
【发布时间】：2013-04-30 20:25:41
【问题描述】：

使用 jquery 似乎有两种方法可以在 DOM 内的无序列表中查找列表项。

$("ul>li");

和

$("ul").find("li");

为什么后者可能更可取？似乎需要更多代码才能获得相同的结果。

【问题讨论】：

find 选择所有匹配的后代元素，> 是直接子选择器。这说明你还没有阅读 jQuery 文档。
你错了。对于任何ul，$("ul>li") 将只找到第一个li，其中$("ul").find("li") 将在每个ul 中找到所有li。您的意思是在第一种情况下：$("ul li") 对吗？
视情况而定。在大多数情况下，尝试根据性能决定使用哪个版本是未成熟的优化，因此在大多数情况下，选择更易于维护和/或易于阅读/理解的版本而不是担心哪个版本更有意义更快。
@WooCaSh 不，它会找到每个 ul 的所有直接子级，即 li。但是，是的，$("ul li") 将是正确的比较。
@KevinB 对。它只找到第一层的所有 li，其中 find 在 ul 下的每一层。

【解决方案1】：

是的。速度。 .find() 每次都会赢。和处理速度无异！

虽然.find() 会得到所有属于下属的东西（孩子、孩子的孩子、孩子的孩子等），而> 是直接的孩子选择器。比较以下任何一项都更好：

虽然如果你使用.find('li')，它仍然是最快的方法，甚至比.children('li') 更快。

【讨论】：

【解决方案2】：

1) 它们不一样，第二种形式相当于$("ul li");，第一种形式相当于$("ul").children("li")

2) 如果您使用第二种形式，您可以简化 jQuery 的解析任务。但这会使您的代码不那么简单，因此除非您证明速度与您的情况非常相关，否则我不会推荐它。话虽这么说，您通常有更多代码，例如一些元素缓存或一些其他遍历函数，证明使用find 是合理的。

【讨论】：