Master JavaScript & jQuery Looping: From for() to $.each() Explained

Preface

The author often confused native JavaScript loop methods with jQuery equivalents, leading to runtime errors; this article consolidates the two sets of functions and explains how to use each correctly.

Converting Between DOM and jQuery Objects

DOM → jQuery

Wrap a DOM element with $(...), e.g., $(document.getElementById("dv")).

jQuery → DOM

Two options are available: $(".cls")[0] or $(".cls").get(0).

Native JavaScript Loop Functions

1. for()

Classic loop that requires knowing the array length.

2. forEach()

Iterates over each element without needing the length.

var arr = ["a","b","c"]; 
arr.forEach(function(t,m,n){
  console.log(t); // element
  console.log(m); // index
  console.log(n); // whole array
});

Result is shown in the accompanying image.

3. every()

Checks whether all elements satisfy a condition; returns false on the first failure.

var arr1 = [2,4,6,1];
var arr2 = [3,6,2,8];
function compare(m){return m>4;}
console.log(arr1.every(compare)); // true
console.log(arr2.every(compare)); // false

4. some()

Returns true if any element satisfies the condition; stops after the first match.

var arr = [2,4,6,1];
function compare(m){return m>3;}
console.log(arr.some(compare)); // true

5. map()

Creates a new array with the results of applying a function to each element.

var arr = [2,4,6,1];
function calculator(m){return m+2;}
console.log(arr.map(calculator)); // [4,6,8,3]

6. filter()

Creates a new array containing elements that pass a test function.

var arr = [2,4,6,1];
function filterNum(m){return m>2;}
console.log(arr.filter(filterNum)); // [4,6]

7. for…in (arrays & objects)

Can iterate over array indices or object properties.

// Array example
var arr = [2,4,6,1];
for(var x in arr){
  console.log(x);       // index
  console.log(arr[x]); // value
}
// Object example
var obj = {name:"Tom",age:12,gender:"Male"};
for(var m in obj){
  console.log(m);       // property name
  console.log(obj[m]);  // property value
}

Image of the for…in output:

jQuery Loop Functions

1. each()

var arr = ["x","y","z"]; 
$(arr).each(function(index,item){
  console.log(index); // index
  console.log(item);   // element
});

2. $.map()

var arr = ["x","y","z"]; 
var arr1 = $.map(arr,function(t,i){
  return t+i;
});
console.log(arr1); // ["x0","y1","z2"]

3. $.grep()

var arr = ["x","y","z"]; 
var arr1 = $.grep(arr,function(t,i){
  return i>1; // keep items with index > 1
});
console.log(arr1); // ["z"]

4. $.inArray()

var arr = ["x","y","z"]; 
var idx1 = $.inArray("y",arr); // 1
var idx2 = $.inArray("n",arr); // -1
console.log(idx1);
console.log(idx2);

5. $.filter()

var result = $("div").filter(".cls");
console.log(result); // jQuery object containing divs with class 'cls'