teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問HTMLにある未定数のclassなどを広い、JSで配列に入れる方法

編集履歴

質問編集履歴

6

誤字の修正

2018/09/17 09:15

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -128,10 +128,10 @@
128
128
 
129
129
  補足させて頂きます。
130
130
 
131
- 上の質問の「ｲd」や「area」は動画情報です。
131
+ 上の質問の「id」や「area」は動画情報です。
132
132
 
133
133
  現状の動画のコードはこうなっていて（[https://jsfiddle.net/38r9tmzo/43/](https://jsfiddle.net/38r9tmzo/43/)）、これですとJSに「ID」と「area」が書かれています。
134
134
 
135
- 今回はこの「id」と「area」をHTMLに書き、JSでそれを取得したいと考えたために質問致しました。
135
+ 今回はこの「id」と「area」をJSでなくHTMLに書き、JSでそれを取得したいと考えたために質問致しました。
136
136
 
137
137
  なので構造は上の質問の通りなのですが、全体的な整合性についても鑑みる必要があるかもしれません。ということを補足させて頂きます。

5

誤字の修正

2018/09/17 09:15

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  }
66
66
 
67
- //以下、HTMLの .list が増えるたびに同様に追加されていく
67
+ //以下、HTMLの .ytBox が増えるたびに同様に追加されていく
68
68
 
69
69
  ];
70
70
 

4

誤字の修正

2018/09/17 09:13

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 対象のHTMLにある``class``と``id``を拾って、目的のJSにある``var Data``に入れたいのですが、JSはどのように書けばよろしいでしょうか？
1
+ 対象のHTMLにある``class``と``id``を拾って、目的のJSにある``var ytData``に入れたいのですが、JSはどのように書けばよろしいでしょうか？
2
2
 
3
3
 
4
4
 
@@ -42,7 +42,7 @@
42
42
 
43
43
  ```javascript
44
44
 
45
- var Data = [
45
+ var ytData = [
46
46
 
47
47
  {
48
48
 

3

誤字修正

2018/09/17 09:13

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -46,21 +46,21 @@
46
46
 
47
47
  {
48
48
 
49
- fst: 'ここに「xxx1」を入れたい',
49
+ id: 'ここに「xxx1」を入れたい',
50
50
 
51
- snd: 'ここに「sample1」を入れたい'
51
+ area: 'ここに「sample1」を入れたい'
52
52
 
53
53
  }, {
54
54
 
55
- fst: 'ここに「xxx72」を入れたい',
55
+ id: 'ここに「xxx72」を入れたい',
56
56
 
57
- snd: 'ここに「sample2」を入れたい'
57
+ area: 'ここに「sample2」を入れたい'
58
58
 
59
59
  }, {
60
60
 
61
- fst: 'ここに「xxx35」を入れたい',
61
+ id: 'ここに「xxx35」を入れたい',
62
62
 
63
- snd: 'ここに「sample3」を入れたい'
63
+ area: 'ここに「sample3」を入れたい'
64
64
 
65
65
  }
66
66
 

2

補足

2018/09/17 09:12

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -78,8 +78,6 @@
78
78
 
79
79
  ```javascript
80
80
 
81
- // 全ての .ytBox から class と id を拾う
82
-
83
81
  var ytIds = [];
84
82
 
85
83
  var ytAreas = [];
@@ -97,8 +95,6 @@
97
95
  });
98
96
 
99
97
 
100
-
101
- // 各動画情報
102
98
 
103
99
  var ytData = [
104
100
 
@@ -125,3 +121,17 @@
125
121
  ];
126
122
 
127
123
  ```
124
+
125
+
126
+
127
+ ###補足
128
+
129
+ 補足させて頂きます。
130
+
131
+ 上の質問の「ｲd」や「area」は動画情報です。
132
+
133
+ 現状の動画のコードはこうなっていて（[https://jsfiddle.net/38r9tmzo/43/](https://jsfiddle.net/38r9tmzo/43/)）、これですとJSに「ID」と「area」が書かれています。
134
+
135
+ 今回はこの「id」と「area」をHTMLに書き、JSでそれを取得したいと考えたために質問致しました。
136
+
137
+ なので構造は上の質問の通りなのですが、全体的な整合性についても鑑みる必要があるかもしれません。ということを補足させて頂きます。

1

コードの修正

2018/09/17 09:11

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -4,41 +4,33 @@
4
4
 
5
5
  ###対象のHTML
6
6
 
7
- まずこのようなHTMLがあります。拾いたいのは「xxx1」や「target_1」です。
7
+ まずこのようなHTMLがあります。拾いたいのは、「.ytBox」から「xxx1」と「sample1」のペアです。
8
8
 
9
9
  ```html
10
10
 
11
- <li class="list">
11
+ <div id="contents">
12
12
 
13
- <div class="content_xxx1">
13
+ <div class="ytBox" id="xxx1">
14
14
 
15
- <div id="target_1"></div>
15
+ <div id="sample1" class="area"></div>
16
16
 
17
17
  </div>
18
18
 
19
- </li>
19
+ <div class="ytBox" id="xxx72">
20
20
 
21
- <li class="list">
22
-
23
- <div class="content_xxx72">
24
-
25
- <div id="target_72"></div>
21
+ <div id="sample2" class="area"></div>
26
22
 
27
23
  </div>
28
24
 
29
- </li>
25
+ <div class="ytBox" id="xxx35">
30
26
 
31
- <li class="list">
32
-
33
- <div class="content_xxx35">
34
-
35
- <div id="target_35"></div>
27
+ <div id="sample3" class="area"></div>
36
28
 
37
29
  </div>
38
30
 
39
- </li>
31
+ </div>
40
32
 
41
- <!-- .listはいくつになるか不明 -->
33
+ <!-- .ytBoxはいくつになるか不明 -->
42
34
 
43
35
  ```
44
36
 
@@ -56,19 +48,19 @@
56
48
 
57
49
  fst: 'ここに「xxx1」を入れたい',
58
50
 
59
- snd: 'ここに「target_1」を入れたい'
51
+ snd: 'ここに「sample1」を入れたい'
60
52
 
61
53
  }, {
62
54
 
63
55
  fst: 'ここに「xxx72」を入れたい',
64
56
 
65
- snd: 'ここに「target_72」を入れたい'
57
+ snd: 'ここに「sample2」を入れたい'
66
58
 
67
59
  }, {
68
60
 
69
61
  fst: 'ここに「xxx35」を入れたい',
70
62
 
71
- snd: 'ここに「target_35」を入れたい'
63
+ snd: 'ここに「sample3」を入れたい'
72
64
 
73
65
  }
74
66
 
@@ -86,47 +78,47 @@
86
78
 
87
79
  ```javascript
88
80
 
89
- // 全ての .list から class と id を拾う
81
+ // 全ての .ytBox から class と id を拾う
90
82
 
91
- var listsFst = [];
83
+ var ytIds = [];
92
84
 
93
- var listsSnd = [];
85
+ var ytAreas = [];
94
86
 
95
- $('.list').each(function() {
87
+ $('.ytBox').each(function() {
96
88
 
97
- var listFst = $(this).attr('id');
89
+ var ytId = $(this).attr('id');
98
90
 
99
- var listSnd = $(this).children('area').attr('id');
91
+ var ytArea = $(this).children('.area').attr('id');
100
92
 
101
- listsFst.push(listFst);
93
+ ytIds.push(ytId);
102
94
 
103
- listsSnd.push(listSnd);
95
+ ytAreas.push(ytArea);
104
96
 
105
97
  });
106
98
 
107
99
 
108
100
 
109
- // 目的のように入れる
101
+ // 各動画情報
110
102
 
111
- var Data = [
103
+ var ytData = [
112
104
 
113
105
  {
114
106
 
115
- fst: listsFst[0],
107
+ id: ytIds[0],
116
108
 
117
- snd: listsSnd[0]
109
+ area: ytAreas[0]
118
110
 
119
111
  }, {
120
112
 
121
- fst: listsFst[1],
113
+ id: ytIds[1],
122
114
 
123
- snd: listsSnd[1]
115
+ area: ytAreas[1]
124
116
 
125
117
  }, {
126
118
 
127
- fst: listsFst[2],
119
+ id: ytIds[2],
128
120
 
129
- snd: listsSnd[2]
121
+ area: ytAreas[2]
130
122
 
131
123
  }
132
124