Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use jQuery's .find() [duplicate]

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

For example,

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

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

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

like image 484
Kyle Muir Avatar asked Oct 09 '13 20:10

Kyle Muir


People also ask

How do you check if there are duplicate elements in an array?

function checkIfArrayIsUnique(myArray) { for (var i = 0; i < myArray. length; i++) { for (var j = i+1; j < myArray. length; j++) { if (myArray[i] == myArray[j]) { return true; // means there are duplicate values } } } return false; // means there are no duplicate values. }

How do you find duplicates in a set?

One more way to detect duplication in the java array is adding every element of the array into HashSet which is a Set implementation. Since the add(Object obj) method of Set returns false if Set already contains an element to be added, it can be used to find out if the array contains duplicates in Java or not.

How do you find multiple duplicate elements in an array?

Duplicate elements can be found using two loops. The outer loop will iterate through the array from 0 to length of the array. The outer loop will select an element. The inner loop will be used to compare the selected element with the rest of the elements of the array.

How can check duplicate value in textbox using jquery?

Using each() check value of inputs and if any value is duplicate add class duplicate to it.


3 Answers

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.

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.

like image 156
PlantTheIdea Avatar answered Sep 21 '22 04:09

PlantTheIdea


It depends on what you're selecting.

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

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.

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.

like image 40
Kevin B Avatar answered Sep 20 '22 04:09

Kevin B


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

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.

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.

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.

Hopefully that makes sense :)

like image 28
Patrick Coffey Avatar answered Sep 23 '22 04:09

Patrick Coffey