Does it make any difference applying a function to all elements that have a class or doing it through the each function? It might be a silly question but in my case a could perform the code in two different ways so I would like to know if there is any performance difference between:
$('.my_class').hide(); //for example
and
$('.my_class').each(function(){
$(this).hide();
});
These are identical in effect, but the first way is superior because it is cleaner. Your goal for your code should be, in order:
In general, you should not worry about speed until you notice some kind of problem. There are times when we may impinge on one of the first three considerations in order to gain speed, however, doing so before you know there is a performance problem violates the "premature optimization" warning all over the internet. It is more important for your code to be concise and understandable than for it to squeeze out the last femtosecond of performance.
If you examine the source code for jQuery 1.10.1 you will see that behind the scenes, calling hide() one at a time must be slower, because instead of hiding all the elements from one function invocation, all inside its own inner loop, now there is an outer loop invoking the function once for each element.
Compare some psuedocode:
/*elements.hide()*/
function hide() {
for (i = 0; i < l; i += 1) {
// hide them
}
}
/*elements.each(function() {element.hide();}*/
function each() {
for (i = 0; i < l; i += 1) {
element[i].hide() { // only one element each time, now
for (i = 0; i < l; i += 1) {
//hide item
}
}
}
}
By using the second method, you've taken an efficient function that itself handles many elements, and forced it to run many times to only handle one element each time.
In general you should simply choose the code that is the cleanest. One of the biggest reasons to use jQuery is to get that clean code so you don't have all the nasty clutter! Anyone can write code that a computer can understand, but a good programmer writes code that humans can understand. There is great value in your code being easily comprehended--by you tomorrow, or someone else next year, or even you in five years. Don't multiply complexity.
For reference, here is the function definition for hide (this is called from a short stub):
function showHide( elements, show ) {
var display, elem, hidden,
values = [],
index = 0,
length = elements.length;
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
values[ index ] = jQuery._data( elem, "olddisplay" );
display = elem.style.display;
if ( show ) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if ( !values[ index ] && display === "none" ) {
elem.style.display = "";
}
// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if ( elem.style.display === "" && isHidden( elem ) ) {
values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
}
} else {
if ( !values[ index ] ) {
hidden = isHidden( elem );
if ( display && display !== "none" || !hidden ) {
jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
}
}
}
}
// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = show ? values[ index ] || "" : "none";
}
}
return elements;
}
And each:
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
},
The direct call $('.my_class').hide(); seems to be faster
See this test
Also the first approach is more clearer and easy to understand
