01.<!DOCTYPE html>
02.<html>
03.<head>
04.<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
05.<meta charset="UTF-8">
06.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
07.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
08.<style>
09.pre {
10. padding: 20px;
11.}
12.</style>
13.<script>
14.function test1() {
15. var wareki = ["明治", "大正", "昭和", "平成", "令和"];
16.
17. var text = "";
18.
19. $.each(wareki, function( key, value ){
20. text += key + " => " + value + "\n";
21. });
22.
23. document.getElementById("text1").innerText = text;
24.}
25.
26.function test2() {
27. var wareki = ["明治", "大正", "昭和", "平成", "令和"];
28.
29. var text = "";
30.
31. $(wareki).each(function( index ){
32. text += index + " => " + this + "\n";
33. });
34.
35. document.getElementById("text2").innerText = text;
36.}
37.
38.</script>
39.</head>
40.<body>
41.
42.<div>
43. <input type="button" value="実行1" onclick="test1()">
44. <input type="button" value="実行2" onclick="test2()">
45.</div>
46.
47.<pre id="text1">
48.</pre>
49.<pre id="text2">
50.</pre>
51.
52.</body>
53.</html>