何时使用jQuery的.find() [duplicate]

This question already has an answer here:

这个问题已经有了答案:

css selectors vs jquery traversal 2 answers
css选择器vs jquery遍历2个答案

When would I use jQuery's .find()?

什么时候使用jQuery的.find()?

For example,

例如,

$('tr').find('.someClass'); is equivalent to $('tr .someClass')

$(tr);(“.someClass”);等于$(“tr .someClass”)

So, when would be a good example of when you would use .find() over a straight selector?

那么，什么时候使用。find()而不是直接选择器是一个很好的例子呢?

Also, which is more performant? Is a selector quicker than .find()?

还有，哪种更有表现力?选择器比。find()快吗?

4 个解决方案

#1

The answer is whenever possible.

只要有可能，答案就是。

It is always more performant than having children / multi-item / CSS / context selectors, and is the fastest-performing traversing mechanism.

它总是比有子/多项目/ CSS /上下文选择器表现得更好，并且是执行速度最快的遍历机制。

jsPerf to show what I mean.

让大家明白我的意思。

The only time you may even consider not using it is if you only want to select items that are direct children, and those children happen to have the same class as their children that you don't want to select. This is a job for .children(), but is a very rare case.

如果您只想选择直接子元素，而这些子元素恰好与您不想选择的子元素具有相同的类，那么您甚至可以考虑不使用它。这是。children()的工作，但这是非常罕见的情况。

#2

It depends on what you're selecting.

这取决于你选择什么。

As the number of elements selected by $('tr') goes up, .find will become more expensive.

随着$(“tr”)选择的元素数量的增加，.find将变得更加昂贵。

Generally it's best to do whatever will result in touching the least number of elements. When you're dealing with just 2 elements (a parent and a child), the .find will clearly be faster because it's just one parent getting it's children and filtering to a selector. But when there are, say, 200 parents, it's going to have to iterate over all 200 and search for children within each. By using a selector to begin with, you never touch all of the parents, you just go directly to the child elements. Even then, the performance of one vs the other will differ from browser to browser.

一般来说，最好做任何会导致接触最少元素的事情。当你只处理两个元素(父元素和子元素)时，.find显然会更快，因为它只是一个父元素获取子元素并将其过滤给一个选择器。但是当有200个父母时，它必须遍历所有的200个然后在每个里面搜索孩子。通过使用选择器开始，您永远不会触及所有的父元素，您只需直接访问子元素。即使这样，一个与另一个的性能也会因浏览器而异。

spend less time worrying about these micro optimizations until it's a real problem you are trying to solve, and at that point, solve that one problem rather than trying to figure out a general rule to follow.

花更少的时间去担心这些微优化，直到它成为你想要解决的真正的问题，在那一点上，解决那个问题，而不是试图去遵循一个一般的规则。

#3

.find() is simply for searching for descendants of a jQuery object that represents a DOM element.

find()只是用于搜索表示DOM元素的jQuery对象的后代。

An example use case would be passing a jQuery object that represents a form element into a form parsing function, and then using .find() to grab different values from the form's child inputs.

一个示例用例是将表示表单元素的jQuery对象传递到表单解析函数中，然后使用.find()从表单的子输入中获取不同的值。

Instead of converting the form into a jQuery object every time you want to grab an element, it's cheaper to assign the jQuery form object to a variable, and then use .find() to grab the inputs.

与每次想要获取元素时将表单转换为jQuery对象不同，将jQuery表单对象分配给变量更便宜，然后使用.find()获取输入。

In code, this:

在代码中,这个:

var $form = $('#myFormId'),
    firstName = $form.find('input[name="firstName"]').val(),
    lastName = $form.find('input[name="lastName"]').val();

is cheaper then this:

便宜那么这个:

var firstName = $('#myFormId input[name="firstName"]').val(),
    lastName = $('#myFormId input[name="lastName"]').val();

It's also cheaper then using .children(), see this reference, unless the items you are searching for direct children of the jQuery object you are operating on.

使用.children()也比使用.children()更便宜，请参阅此引用，除非您正在搜索正在操作的jQuery对象的直接子对象的项。

Hopefully that makes sense :)

希望这说得通

#4

Great answers above, but just wanted to add .find() is a descendant based search. So it will find all the children of the Dom element being selected.

上面的答案很好，但我只想添加.find()是基于后代的搜索。因此，它将找到所选Dom元素的所有子元素。

#1