teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問IDに連番を付けながら同じ処理を指定回数繰り返す、スマートな書き方を教えてください。

編集履歴

質問編集履歴

2

不備が多すぎたため内容を見直して修正しました。

2021/09/23 02:29

投稿

iunz.el
iunz.el

スコア1

test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 下記コードの、
10
-
11
- **IDに連番(#youtube_01～#youtube_04)を付けながら同じ処理を指定回数(4回)繰り返す**
9
+ **articleタグのIDに連番(#youtube_01～#youtube_04)を付けながら同じ処理を指定回数(4回)繰り返す**
12
10
 
13
11
  にはどう書くのが良いでしょうか。
14
12
 
@@ -18,65 +16,143 @@
18
16
 
19
17
 
20
18
 
19
+ [codepen](https://codepen.io/iunz-el/pen/WNOKgOQ)
20
+
21
+ ↑【APIKEY】を入力で動作します。
22
+
23
+ 下記にも同じコードを記載します。
24
+
25
+
26
+
27
+ ```HTML
28
+
29
+ <article id="youtube_01" class="youtube">
30
+
31
+ <a id="js-youtube-link_01" href="" class="youtube-link">
32
+
33
+ <div class="youtube-image-wrap">
34
+
35
+ <img id="js-youtube-image_01" src="" class="youtube-image">
36
+
37
+ <span id="js-youtube-duration_01" class="youtube-duration"></span>
38
+
39
+ </div>
40
+
41
+ <div class="youtube-content">
42
+
43
+ <h1 id="js-youtube-title_01" class="youtube-title"></h1>
44
+
45
+ <div class="youtube-detail">
46
+
47
+ <span id="js-youtube-channel_01" class="youtube-channel" data-href=""></span> • <span id="js-youtube-views_01"></span> 回視聴 • <span id="js-youtube-date_01"></span>
48
+
49
+ </div>
50
+
51
+ </div>
52
+
53
+ </a>
54
+
55
+ </article>
56
+
57
+
58
+
59
+ ```
60
+
61
+
62
+
21
63
  ```jQuery
22
64
 
23
- $(function() {
65
+ //リクエストパラメーターのセット
24
66
 
25
- $('#youtube_01').each(function(){
67
+ const KEY = '【APIKEY】' ;// APIKEY
26
68
 
27
- const KEY = '【APIKey】';
69
+ const ID = 'bjmBJ1Fl0cs' ;// 動画ID
28
70
 
29
- let url = '【URL】';
71
+ let url = 'https://www.googleapis.com/youtube/v3/videos'; // APIURL
30
72
 
31
- var $youtubeID_01 = '【動画のURL文字列】';
73
+ url += '?id=' + ID;
32
74
 
33
- const ID = $youtubeID_01;
75
+ url += '&key=' + KEY;
34
76
 
35
- url += '?id=' + ID;
77
+ url += '&part=snippet,contentDetails,statistics,status';
36
78
 
37
- url += '&key=' + KEY;
38
79
 
39
- url += '&part=snippet,contentDetails,statistics,status';
40
80
 
41
- $.ajax({
81
+ //Ajax通信をする
42
82
 
43
- url: url,
83
+ $(function(){
44
84
 
45
- dataType : 'json'
85
+ $.ajax({
46
86
 
47
- }).done(function(data){
87
+ url: url,
48
88
 
49
- $('#youtube_link_01').attr('href', '【URL】'+$youtubeID_01);
89
+ dataType : 'json'
50
90
 
51
- $('#youtube_img_01').attr('src', data.items[0].snippet.thumbnails.medium.url);
91
+ }).done(function(data){
52
92
 
53
- $('#youtube_title_01').append(data.items[0].snippet.title);
93
+ // URL
54
94
 
55
- $('#youtube_views_01').append(data.items[0].statistics.viewCount);
95
+ $('#js-youtube-link_01').attr('href', `https://www.youtube.com/watch?v=bjmBJ1Fl0cs`);
56
96
 
57
- let duration = data.items[0].contentDetails.duration;
97
+
58
98
 
59
- let convertDuration = moment.duration(duration).format();
99
+ // サムネイル
60
100
 
61
- $('#youtube_duration_01').append(convertDuration);
101
+ $('#js-youtube-image_01').attr('src', data.items[0].snippet.thumbnails.medium.url);
62
102
 
63
- moment.locale('ja');
103
+
64
104
 
65
- let date = data.items[0].snippet.publishedAt;
105
+ // タイトル
66
106
 
67
- let convertDate = moment(date).fromNow();
107
+ $('#js-youtube-title_01').append(data.items[0].snippet.title);
68
108
 
69
- $('#youtube_date_01').append(convertDate);
109
+
70
110
 
71
- }).fail(function(data){
111
+ // チャンネル名
72
112
 
73
- console.log('通信に失敗しました。');
113
+ $('#js-youtube-channel_01').append(data.items[0].snippet.channelTitle);
74
114
 
75
- });
115
+
76
116
 
117
+ // 再生回数
118
+
119
+ $('#js-youtube-views_01').append(data.items[0].statistics.viewCount);
120
+
121
+
122
+
123
+ // 再生時間
124
+
125
+ let duration = data.items[0].contentDetails.duration;
126
+
127
+ let convertDuration = moment.duration(duration).format();
128
+
129
+ $('#js-youtube-duration_01').append(convertDuration);
130
+
131
+
132
+
133
+ // 投稿日時
134
+
135
+ moment.locale('ja');
136
+
137
+ let date = data.items[0].snippet.publishedAt;
138
+
139
+ let convertDate = moment(date).fromNow();
140
+
141
+ $('#js-youtube-date_01').append(convertDate);
142
+
143
+
144
+
145
+
146
+
147
+ }).fail(function(data){
148
+
149
+ console.log('通信に失敗しました。');
150
+
77
- });
151
+ });
78
152
 
79
153
  });
154
+
155
+
80
156
 
81
157
  ```
82
158
 
@@ -86,107 +162,15 @@
86
162
 
87
163
 
88
164
 
89
- ・上記のコードを単純に4つ複製してIDの数字を変える。
165
+ ・上記のコードを単純に4つ複製して「_01」の数字を変える。
90
-
91
- ・HTMLへの出力の際は下記のコードを書いて繰り返し表示をしてみました。このようなことを上記のコードに応用したいのですが…。
92
-
93
- ```jQuery
94
-
95
- $(function(){
96
-
97
- $('.youtube_link').each(function(i){
98
-
99
- $(this).attr('id','youtube_link_0'+(i+1));
100
-
101
- });
102
-
103
- $('.youtube_img').each(function(i){
104
-
105
- $(this).attr('id','youtube_img_0'+(i+1));
106
-
107
- });
108
-
109
- $('.youtube_duration').each(function(i){
110
-
111
- $(this).attr('id','youtube_duration_0'+(i+1));
112
-
113
- });
114
-
115
- $('.youtube_title').each(function(i){
116
-
117
- $(this).attr('id','youtube_title_0'+(i+1));
118
-
119
- });
120
-
121
- $('.youtube_views').each(function(i){
122
-
123
- $(this).attr('id','youtube_views_0'+(i+1));
124
-
125
- });
126
-
127
- $('.youtube_date').each(function(i){
128
-
129
- $(this).attr('id','youtube_date_0'+(i+1));
130
-
131
- });
132
-
133
- });
134
-
135
- ```
136
166
 
137
167
 
138
168
 
139
- ---
169
+ ・参考にさせていただいたコードは下記になります。
140
170
 
141
- 【9/23 09:50追記】
171
+ [https://codepen.io/hatsushi_kazuya/pen/KKwzYNE](https://codepen.io/hatsushi_kazuya/pen/KKwzYNE)
142
-
143
- HTMLは下記の記述で出力しています。
144
172
 
145
173
 
146
-
147
- ```jQuery
148
-
149
- var $list = `
150
-
151
- <li class="youtube">
152
-
153
- <a href="" class="youtube_link">
154
-
155
- <div class="img_wrap">
156
-
157
- <img src="" class="youtube_img" alt="">
158
-
159
- <span class="youtube_duration"></span>
160
-
161
- </div>
162
-
163
- <div class="youtube_content">
164
-
165
- <h2 class="youtube_title"></h2>
166
-
167
- <div class="youtube_detail">
168
-
169
- <span class="youtube_views"></span> 回視聴 • <span class="youtube_date"></span>
170
-
171
- </div>
172
-
173
- </div>
174
-
175
- </a>
176
-
177
- </li>
178
-
179
- `;
180
-
181
-
182
-
183
- for( var i = 0; i < 4; i++ ){
184
-
185
- $('ul').append($list);
186
-
187
- }
188
-
189
- ```
190
174
 
191
175
  ---
192
176
 

1

HTMLを追記しました。

2021/09/23 02:29

投稿

iunz.el
iunz.el

スコア1

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,59 @@
136
136
 
137
137
 
138
138
 
139
+ ---
139
140
 
141
+ 【9/23 09:50追記】
142
+
143
+ HTMLは下記の記述で出力しています。
144
+
145
+
146
+
147
+ ```jQuery
148
+
149
+ var $list = `
150
+
151
+ <li class="youtube">
152
+
153
+ <a href="" class="youtube_link">
154
+
155
+ <div class="img_wrap">
156
+
157
+ <img src="" class="youtube_img" alt="">
158
+
159
+ <span class="youtube_duration"></span>
160
+
161
+ </div>
162
+
163
+ <div class="youtube_content">
164
+
165
+ <h2 class="youtube_title"></h2>
166
+
167
+ <div class="youtube_detail">
168
+
169
+ <span class="youtube_views"></span> 回視聴 • <span class="youtube_date"></span>
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+ </a>
176
+
177
+ </li>
178
+
179
+ `;
180
+
181
+
182
+
183
+ for( var i = 0; i < 4; i++ ){
184
+
185
+ $('ul').append($list);
186
+
187
+ }
188
+
189
+ ```
190
+
191
+ ---
140
192
 
141
193
 
142
194