Learning jQuery

jQuery 3.0 is the newest version of jQuery and its beta version is already out. There are many changes in jQuery 3, but one of the important changes is new syntax of for loop to iterate over the DOM elements of a jQuery collection using the for...of loop. This new change is more in line with other present language and technologies. And this is part of ECMA 6 specification.

Here is the old way to loop using jQuery:

var $dvElements = $("div");
for (var x=0; x< $dvElements.length; x++){
$dvElements[x].addClass("dummy");
}

With-in the loop, you use index on jQuery collection to get the element.

Here is the new syntax with jQuery 3.0:

var $dvElements = $("div");
var i = 0;
for(var elm of $dvElements) {
elm.addClass("dummy");
}

With this new syntax, you will get DOM element, instead of jQuery collection. So here you don’t need to use index to get the element as you are already having direct access to the element.