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()
?
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. }
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.
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.
Using each() check value of inputs and if any value is duplicate add class duplicate to it.
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.
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.
.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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With