jQuery $('#id tag') 与 $('#id').find('tag') - 哪个更可取？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11502563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$('#id tag') vs. $('#id').find('tag') - which is preferable?
提问by Nick
I want to know which option is better, particularly in terms of their speed:
我想知道哪个选项更好，尤其是在速度方面：
$('#id tag')...
or
或者
$('#id').find('tag')...
Also, would the same answer apply if you change idand/or tagto, say, a classor something like input:checked?
此外，如果您更改id和/或更改tag为 aclass或类似的内容，同样的答案是否适用input:checked？
For example, which is better: $('#id input:checked')...or $('#id').find('input:checked');?
例如，哪个更好：$('#id input:checked')...或$('#id').find('input:checked');？
采纳答案by Beat Richartz
You can base your decision on 3 things:
您可以根据三件事做出决定：
Readability
可读性
This is not much of a difference with your two given selectors. For my part, I prefer the $('#id').find('inner')syntax because it describes more accurately what it is actually doing.
这与您的两个给定选择器没有太大区别。就我而言，我更喜欢$('#id').find('inner')语法，因为它更准确地描述了它实际在做什么。
Reusability
可重用性
If you have other parts of your code use the same id selector (or something in its context), you can cache the selector and reuse it. I myself find it harder to refactor code that has been written like this $('#id inner'), because you have to decode the css selector first before you can move on and find possible improvements.
如果您的代码的其他部分使用相同的 id 选择器（或其上下文中的某些内容），您可以缓存选择器并重用它。我自己发现重构像这样编写的代码更难$('#id inner')，因为在继续并找到可能的改进之前，您必须先解码 css 选择器。
Imagine these two cases with not much complexity
想象一下这两种情况并不复杂
$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();
And the other case
而另一种情况
$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();
I think the second example screams at you ?Cache the id selector?, and the first does not.
我认为第二个例子对你尖叫？缓存 id 选择器？，第一个没有。
Speed
速度
Performance is always a good point, and in this case, the id selector with the finddoes the better job in most browsers, because it establishes the context first and can apply the descending selector to a smaller subset of elements.
性能总是一个好点，在这种情况下，带有 的 id 选择器find在大多数浏览器中做得更好，因为它首先建立上下文，并且可以将降序选择器应用于较小的元素子集。
Here's a good performance test, if you want to know more about context-vs subset selectors performance in jQuery. Subsets of ids generallyrule. Of course you can get different results, but in most cases, they do.
这是一个很好的性能测试，如果您想了解更多有关 jQuery 中上下文与子集选择器性能的信息。id 的子集通常是规则。当然，您可以获得不同的结果，但在大多数情况下，它们确实如此。
So, 3 to 0 for subset selectors from my point of view.
因此，从我的角度来看，子集选择器是 3 到 0。
回答by Robert Koritnik
Here's the test case HTML where I look for all spanelements under #ielement:
这是我在span元素下查找所有元素的测试用例 HTML #i：
<div id="i">
<span>testL1_1</span>
<span>testL1_2</span>
<div>
<span>testL2_1</span>
</div>
<ul>
<li>
<span>testL3_1</span>
</li>
</ul>
<div>
<div>
<div>
<div>
<span>testL5_1</span>
</div>
</div>
</div>
</div>
</div>
Testing these three jQuery selectors:
测试这三个 jQuery 选择器：
$("#i span"); // much slower
$("#i").find("span"); // FASTEST
$("span", "#i"); // second fastest
http://jsperf.com/jquery-sub-element-selection
http://jsperf.com/jquery-sub-element-selection
I've run it on Google Chrome and Firefox and it seems that .find()is the fastest closely followed by the third case and much slower first one.
我已经在 Google Chrome 和 Firefox 上运行它，它似乎.find()是最快的，紧随其后的是第三种情况，而第一种情况要慢得多。
回答by T.J. Crowder
It would appear that the first one $("#id tag")is muchslower than the second ($("#id").find("tag")) on modern browsers; test here, see screenshot below. IE7 (which lacks querySelectorAll) runs them at roughly the same speed.
这样看来，第一个$("#id tag")是多比第二（较慢$("#id").find("tag")的现代浏览器）; 在这里测试，看下面的截图。IE7（缺少querySelectorAll）以大致相同的速度运行它们。
But two observations:
但是有两个观察：
It's extremely unlikely to actually matter. If you aren't debugging an actual, known performance problem, don't worry about it.
Synthetic benchmarks are always suspect. If you're fighting an actual, known performance problem, profile that(your actual selector and your actual markup).
实际上极不可能。如果您没有调试实际的、已知的性能问题，请不要担心。
综合基准总是值得怀疑的。如果您正在解决实际的、已知的性能问题，请分析该问题（您的实际选择器和实际标记）。
回答by Tats_innit
Performance measure here: :)==>http://jsperf.com/find-vs-descendant-selector
这里的性能测量：:)==> http://jsperf.com/find-vs-descendant-selector
Seems like descendantway is lil faster but perform poorly in opera,
似乎descendant方式更快，但在歌剧中表现不佳，
anyhoo in my opinion it doesn't matter :)
anyhoo 在我看来没关系 :)
Hope this answers your question and see here Is .find() faster than basic descendant selecting method?
希望这能回答您的问题，并在此处查看.find() 比基本后代选择方法更快吗？
回答by Ravi Gadag
Descendant performs better. check for this link Jsperf .
后代表现更好。检查此链接Jsperf。
- if you have too many nested element. then go for find. it's really a small amount of difference.
- it's just your convienent way of coding. i prefer if too many nested items are there, then i will go for find,
- 如果嵌套元素太多。然后去找找。这真的是一个很小的差异。
- 这只是您方便的编码方式。我更喜欢如果有太多嵌套项目，那么我会去找，
回答by Royi Namir
as ive said - its different in browsers.
正如我所说 - 它在浏览器中不同。
chrome :
铬合金 ：
http://i.stack.imgur.com/SijQY.jpg
http://i.stack.imgur.com/SijQY.jpg
