我应该使用 .find(".foo .bar") 还是 .children(".foo").children(".bar") ？

发布于 2024-09-03 00:49:55 字数 171 浏览 2 评论 0 原文

当使用 jQuery 进行 DOM 遍历时，这两种方法都会返回相同的结果（我相信）：

$("whatever").find(".foo .bar")
$("whatever").children(".foo").children(".bar")

使用哪个更好？

原文

When using jQuery for DOM traversal both of these return the same results (I believe):

$("whatever").find(".foo .bar")
$("whatever").children(".foo").children(".bar")

Which is preferable to use?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

π浅易 2024-09-10 00:49:55

它们并不等效，正如我将在下面解释的那样，但如果调整它们以匹配， .children( ) 为了速度，.find() 为简洁起见（Sizzle 内的额外工作，为初学者解析此内容），您可以决定哪个更重要。

第一个函数有不同的结果，但如果您知道它们是子函数，您可以这样做：

$("whatever").find("> .foo > .bar")
//equal to...
$("whatever").children(".foo").children(".bar")

This 相当于您的第二个函数。目前，您拥有的第一个会发现：

<whatever>
  <div class="foo">
    <span>
     <b class="bar">Found me!</b>
    </span>
  </div>
</whatever>

第二个不会，它要求 .foo 是 whatever 的直接子级，并且.bar 是其直接子级，.find(".foo .bar") 允许它们为任何深度，如与 .foo 的后代中的 .bar 一样长。

They are not equivalent, as I'll explain below, but if adjust them to match, .children() for speed, .find() for brevity (extra work inside Sizzle, parsing this for starters), you decide which is more important.

The first has different results, but if you know they're children, you can do this:

$("whatever").find("> .foo > .bar")
//equal to...
$("whatever").children(".foo").children(".bar")

This would be equivalent to your second function. Currently, the first as you have it would find this:

<whatever>
  <div class="foo">
    <span>
     <b class="bar">Found me!</b>
    </span>
  </div>
</whatever>

The second would not, it requires that .foo be a direct child of whatever and .bar be a direct child of that, the .find(".foo .bar") allows them to be any level deep, as long as .bar in a descendant of .foo.

回复收藏 0 原文

海螺姑娘 2024-09-10 00:49:55

或者：（

$('whatever .foo .bar')

或者 >.foo>.bar 如果您确实只想要直接子元素。）

只要 whatever 是标准 CSS3 选择器（不使用任何 Sizzle -特定扩展），像上面这样的单个文档相对选择器将被传递到现代浏览器上的 document.querySelectorAll ，这将比 Sizzle 的手动树遍历快得多。

[虽然理论上应该可以使用 element.querySelectorAll 快速进行 $(...).find(...) 形式的查询，但目前 jQuery不会使用此方法，因为在 Selectors-API 标准和 jQuery 的传统作用域行为之间对如何解析相对选择器存在不同意见。]

Alternatively:

$('whatever .foo .bar')

(or >.foo>.bar if you do want only direct children.)

As long as whatever is a standard CSS3 selector (not using any of the Sizzle-specific extensions), a single document-relative selector like the above will be passed off to document.querySelectorAll on modern browsers, which will be much faster than Sizzle's manual tree-walking.

[Whilst in theory it should be possible to use element.querySelectorAll to make queries of the form $(...).find(...) fast, jQuery currently won't use this method because of differences in opinion over how relative selectors are resolved between the Selectors-API standard and jQuery's traditional scoped behaviour.]