A couple questions:
Is a regular javascript loop (to loop through a series of elements) faster/more efficient than using jQuery each() ??
If so, what is the best way to write the following code as a regular javascript loop?
$('div').each(function(){ //... })
Yes, removing the each() will give you slightly better performance. This is how you could write a for loop for a list of elements.
var divs = $('div');
for(var i = 0; i < divs.length; i++){
var thisDiv = divs[i]; // element
var $thisDiv = $(divs[i]); // jquery object
// do stuff
}
divs[i] a jquery object? when i do thisDiv.find('a'), for example, I get an error...
divs[i] is not a jquery object. You would have to $(divs[i])
divs.length outside of the loopvar divs = document.getElementsByTagName('div'),
l = divs.length, i, cur;
for(i=0; i<l; i++) {
cur = divs[i];
// do stuff with cur here
}
Please continue on your path to removing jQuery in the name of efficiency. This code is approximately fifty times faster than the jQuery equivalent.
To answer your second question, due to the first already being answered;
I was also interested in this, and I decided to benchmark the two to find the difference using Gabe's example. The answer is, in circumstances of wanting a jQuery object as the final result:
They perform exactly the same.
http://jsperf.com/jquery-each-vs-native-selectors
Firefox actually finds the jQuery version faster, apparently.
Instead of using jquery .each()
$('div').each(function(){ //... })
You can use document.querySelectorAll(), then convert the HTMLCollection into a JavaScript array. Then you can map over the array of elements.
const elems = document.querySelectorAll('.my-elements')
const $elems = [].slice.call(elems)
$elems.map( (elem) => { console.log(elem) })
forloop is faster, but note that if what you're doing within the loop involves callback functions that need to use the loop index variable later then you would need to introduce a closure and that would (more or less) cancel out the efficiency gains.