blocks|key|3370699|text|这应该更好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3370700|$(element).find('.x:first');|code-block|syntax|javascript|3370701|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should be better

<pre><code>$(element).find('.x:first');
</code></pre>

blocks|key|1816815|text|使用:first选择器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1816816|$(element).find('.x:first')|code-block|syntax|javascript|1816817|entityMap^0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Use <code>:first</code> selector:

<pre><code>$(element).find('.x:first')
</code></pre>

blocks|key|3370733|text|最好写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3370734|$('a:first');|code-block|syntax|javascript|3370735|你写的是“元素”，找到'.x‘并返回第一个元素“。这可以这样表达|3370736|$('.x:first',+element);|3370737|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

It's better to write:

<pre><code>$('a:first');
</code></pre>

What you're writing is "in 'element', find '.x' and return the first one". And that can be expressed like this

<pre><code>$('.x:first', element);
</code></pre>

blocks|key|3370787|text|使用第一个孩子伪类如何？喜欢|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3370788|$(element).find('.x:first-child')|code-block|syntax|javascript|3370789|但是，如果您的结构类似于|3370790|<div>
+++
</div>
<div>
+++
</div>|3370791|所以实际上，这不是你想要的(如果你指的是一般的解决方案)。第一，这似乎是正确的方法。|3370792|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/sel_firstchild.asp^0|2|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

how about using <a href="http://www.w3schools.com/cssref/sel_firstchild.asp" rel="nofollow">first-child</a> pseudo class ? like 

<pre><code>$(element).find('.x:first-child')
</code></pre>

However it might generate issues if your structure is like

<pre><code>&lt;div&gt;
 &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
 &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

so actually it is not what you are looking for (if you mean general solution). Others mnetions :first and this seems to be the correct approach

blocks|key|3370841|text|根据jQuery文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3370842|因为:首先是一个jQuery扩展而不是CSS规范的一部分，所以使用:first的查询不能利用原生DOM+querySelectorAll()方法提供的性能提升。要在使用时获得最佳性能:首先要选择元素，首先使用纯CSS选择器选择元素，然后使用.filter("+:first+")。|blockquote|3370843|因此，请将选择器重写为：|3370844|$(element).find('.x').filter(":first")|code-block|syntax|javascript|3370845|或者(除非您也在寻找嵌套元素，否则这只会给您直接的后代，并且将比.find更快)|offset|length|style|CODE|3370846|$(element).children('.x').filter(":first")|3370847|会给你更好的结果。|3370848|在更新了来自金吉夫和帕特里克·dw的有价值的输入之后(请参阅注释)，与文档所称的相反，这两者似乎比.filter(':first')更快。|BOLD|3370849|$(element).find('.x').first();+++//+faster

$($(element).find('.x')[0]);+++++//+fastest|3370850|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/717383/kingjiv|1|https://stackoverflow.com/users/113716/patrick-dw^0|0|0|0|0|W|5|0|0|0|1|1W|1D|H|6|3|0|A|7|1|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1C|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1D|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|6|7|1E|8|@$N|1F|O|1G|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|I|7|1H|8|@]|9|@]|A|$J|K]]|$1|T|3|U|5|6|7|1I|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1J|8|@$N|1K|O|1L|P|X]|$N|1M|O|1N|P|Q]]|9|@$N|1O|O|1P|1|1Q]|$N|1R|O|1S|1|1T]]|A|$]]|$1|Y|3|Z|5|I|7|1U|8|@]|9|@]|A|$J|K]]|$1|10|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

As per jQuery docs:

<blockquote>
 Because :first is a jQuery extension and not part of the CSS
 specification, queries using :first cannot take advantage of the
 performance boost provided by the native DOM querySelectorAll()
 method. To achieve the best performance when using :first to select
 elements, first select the elements using a pure CSS selector, then
 use .filter(":first").
</blockquote>

So rewriting your selector to:

<pre><code>$(element).find('.x').filter(":first")
</code></pre>

or (this one will give you direct descendants only and will be faster than <code>.find</code>, unless you're looking for nested elements too)

<pre><code>$(element).children('.x').filter(":first")
</code></pre>

should give you better results.

<hr>

Update After valuable inputs from <a href="https://stackoverflow.com/users/717383/kingjiv">kingjiv</a> and <a href="https://stackoverflow.com/users/113716/patrick-dw">patrick dw</a> (see comments),
it does seem that these two are faster than <code>.filter(':first')</code> contrary to what the doc claims.

<pre><code>$(element).find('.x').first(); // faster

$($(element).find('.x')[0]); // fastest
</code></pre>

blocks|key|1816985|text|您的瓶颈实际上是.find()，它搜索所有的后代，而不仅仅是直接的子代。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1816986|除此之外，您还在搜索类.x+(它使用jQuery自定义搜索)，而不是ID或标签名(后者使用本地DOM方法)。|1816987|我会用姆尔斯奇的回答，然后，如果可能的话，解决这两个瓶颈，以加快你的选择。|1816988|entityMap^0|8|7|0|B|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

Your bottleneck is really the <code>.find()</code>, which searches all the descendants instead of just the immediate children. 

On top of that, you're searching for a class <code>.x</code> (which uses a jQuery custom search) instead of an ID or a tagname (which use native DOM methods).

I would use Mrchief's answer and then, if possible, fix those two bottlenecks to speed up your selector.

blocks|key|3370899|text|根据jQuery文档，这种方法很好，或者至少比使用:first选择器更好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3370900|您可以尝试作为替代方案.filter(":first")，也可以使用数组访问器对.find()结果[0]获取第一个元素。|3370901|另外，可以将其更改为：.find()，而不是：|3370902|$('.x',+element)|code-block|syntax|javascript|3370903|若要将搜索范围缩小到元素内部的.x元素，则需要搜索整个文档。|3370904|entityMap^0|P|6|0|B|H|14|7|1D|3|0|B|7|0|0|F|2|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|R|$]]

That way is fine according to the jQuery documentation, or at least better than using <code>:first</code> selector.

You can try as alternatives <code>.filter(":first")</code> or get the first element using array accessor against the <code>.find()</code> result <code>[0]</code>.

Also, instead of <code>.find()</code> you can change it to:

<pre><code>$('.x', element)
</code></pre>

To narrow the search to <code>.x</code> elements inside element, intead of searching the whole document.

blocks|key|1817046|text|尽管看起来很疯狂，但在我看到的每一次性能测试中，.first()的性能都比:first好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1817047|正如大多数人所建议的那样，似乎使用$(element).find(".x:first")应该具有更好的性能。然而，在现实中，.first更快。我还没有研究jquery的内部结构来找出原因。|1817048|http://jsperf.com/jquery-select-first|1817049|显然，使用[0]并在jquery对象中重新包装是最快的：|1817050|$($(element).find(".x")[0])|1817051|编辑:关于原因的解释，请参阅姆尔杰斯的答案。显然，他们现在已经把它添加到文档中了。|1817052|entityMap|0|LINK|mutability|MUTABLE|url^0|O|8|11|6|0|H|R|1Q|6|0|0|11|0|0|5|3|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|J|3|K|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1G|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|I]]]]

As crazy as it seems, in every performance test I've seen, <code>.first()</code> has better performance than <code>:first</code>. 

As most people are suggesting, it seems as though using <code>$(element).find(".x:first")</code> should have better performance. However, in reality <code>.first</code> is faster. I have not looked into the internals of jquery to figure out why.

<a href="http://jsperf.com/jquery-select-first" rel="nofollow">http://jsperf.com/jquery-select-first</a>

And apparently using <code>[0]</code> and then rewrapping in a jquery object is the fastest:

<code>$($(element).find(".x")[0])</code>

EDIT: See mrchief's answer for an explanation of why. Apparently they have now added it to the documentation.

blocks|key|1817057|text|您可以使用后代选择器组合$(element)和.find()调用；我不确定性能比较：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1817058|$("#element+.x").first().hide();|code-block|syntax|javascript|1817059|entityMap^0|C|A|N|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You could combine the <code>$(element)</code> and <code>.find()</code> calls using a descendant selector; I'm unsure of the performance comparison:

<pre><code>$("#element .x").first().hide();
</code></pre>

I need to retrieve the first element.

I do that with this code...

<pre><code>$(element).find('.x').first();
</code></pre>

As much as I understand, that code...

<ol>
<li>Retrieves all elements from <code>element</code> that matched <code>.x</code>,</li>
<li>Removes unneeded elements;</li>
</ol>

Is there any better way to do it? Like <code>$.findOne()</code> or something?

How to optimize $.find().first()?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要找回第一个元素。我用这个密码..。$(element).find('.x').first();据我所知，那个密码..。从element检索与.x匹配的所有元素，移除不需要的元素；有什么更好的方法吗？像$.findOne()之类的吗？

问如何优化$.find().first()？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何优化$.find().first()？EN