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

Question

I need to retrieve the first element.

I do that with this code...

$(element).find('.x').first();

As much as I understand, that code...

1. Retrieves all elements from element that matched .x,
2. Removes unneeded elements;

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

Answer 1

As per jQuery docs:

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").

So rewriting your selector to:

$(element).find('.x').filter(":first")

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

$(element).children('.x').filter(":first")

should give you better results.

---

Update After valuable inputs from kingjiv and patrick dw (see comments), it does seem that these two are faster than .filter(':first') contrary to what the doc claims.

$(element).find('.x').first();   // faster

$($(element).find('.x')[0]);     // fastest