https://idea-hack.com/en/blog/106737/
4 sample code that conveniently uses jQuery.each ()

4 sample code that conveniently uses jQuery.each ()

Do you think that jQuery.each () can only be specified with a selector? Actually, you can specify objects, arrays, and JSON, so let’s keep the way down.

What is jQuery.each () function?

The jQuery.each () function is a function that performs a loop process that is adding the same processing to each child element in the target parent element.

This function is like a basic syntax, so you probably know it.

However, it is not widely known that you can specify an array or an object, besides the way to specific elements such as $ (‘div’).

How to write jQuery.each () syntax

Specify by selector

The following example is a code that uses a selector to get all the
elements on the page and outputs their index and ID.

Output
Text 1
Text 2
Text 3
Pug
#targetText1 Text 1
	#targetText2 Text 2
	#targetText3 Text 3
JavaScript
// DOM ELEMENTS
jQuery('div').each(function(index, value) {
  console.log(`div${index}:${jQuery(value).text()}`);
});
/*-----
 Console.logの結果
 "div0:Text 1"
"div1:Text 2"
"div2:Text 3"
-------*/

Specify by array

Next, we will prepare an array and introduce code to loop through each value.

In the sample code below, the value in the loop is output as it is.

JavaScript
// 配列
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

jQuery.each(arr, function(index, value) {
  console.log(value);
  // 3番目で終了する
  return (value !== 'three');
});

// Consolelogの出力結果: one two three

Specify by object

Next, here is the code that loops by specifying an object.

JavaScript
// OBJECTS
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

jQuery.each(obj, function(key, value) {
  console.log(this);
	console.log(value);
});

// Console.logの出力結果: 1 2 3 4 5

This sample can also achieve the same result as looping using “array” and “selector.”

However, note that “this and value” are strictly different for objects.

In the above code, both “console.log (value)” and “console.log (this)” return “1”. Although value simply returns “1”, this simply gets “one: 1” and implicitly returns “1”.

Therefore, when compared by type, it will be false. This is because value itself is a Number type, and this is an object type.

JavaScript
jQuery.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

//console.logの結果
// true
// false

Specify in JSON

It is also possible to loop JSON.

JavaScript
const colors = [
  { 'red': '#f00' },
  { 'green': '#0f0' },
  { 'blue': '#00f' }
];

jQuery.each(colors, function() {
  $.each(this, function(name, value) {
    console.log(`${name} = ${value}`);
  });
});

Since JSON is nested, you need to use the jQuery.each () method twice as in the sample code.

Conclusion

As you can see, the jQuery.each () method tends to be used by specifying a selector, but since you can specify anything other than a selector, knowing it will increase the efficiency of development.