質問編集履歴

2

コード修正

2018/09/21 02:36

投稿

skipping
skipping

スコア14

test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
 
16
16
 
17
- 具体的には、先祖番号を連結した疑似的な入れ子によって親子関係とし、親の「open」クリック後にその子が表示される。というものです。
17
+ 仕組みは、先祖番号を連結した疑似的な入れ子によって親子関係とし、親の「open」クリック後にその子がスライダー表示される。というものです。
18
-
19
-
20
-
18
+
19
+
20
+
21
- Sample:[https://jsfiddle.net/he6pLufa/](https://jsfiddle.net/he6pLufa/)
21
+ Sample:[https://jsfiddle.net/nd6jser0/](https://jsfiddle.net/nd6jser0/)
22
22
 
23
23
 
24
24
 
@@ -38,286 +38,284 @@
38
38
 
39
39
  空の``ancestor=""``に先祖番号が連結され、子がいる場合にのみ「open」ボタンが表示される仕組みです。
40
40
 
41
-
41
+ ```html
42
+
43
+ <div class="alllists">
44
+
45
+ <ul>
46
+
47
+
48
+
49
+ <li>
50
+
51
+ <div id="post-7" class="list" parent="0" ancestor="">X家
52
+
53
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
54
+
55
+ </div>
56
+
57
+ <ul class="childrens">
58
+
59
+ <li>
60
+
61
+ <div id="post-39" class="list" parent="7" ancestor="">A
62
+
63
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
64
+
65
+ </div>
66
+
67
+ </li>
68
+
69
+ </ul>
70
+
71
+ </li>
72
+
73
+
74
+
75
+ <li>
76
+
77
+ <div id="post-157" class="list" parent="0" ancestor="">Y家
78
+
79
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
80
+
81
+ </div>
82
+
83
+ <ul class="childrens">
84
+
85
+ <li>
86
+
87
+ <div id="post-200" class="list" parent="157" ancestor="">B
88
+
89
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
90
+
91
+ </div>
92
+
93
+ </li>
94
+
95
+ <li>
96
+
97
+ <div id="post-354" class="list" parent="157" ancestor="">C
98
+
99
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
100
+
101
+ </div>
102
+
103
+ </li>
104
+
105
+ <li>
106
+
107
+ <div id="post-365" class="list" parent="354" ancestor="">D(Cの子)
108
+
109
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
110
+
111
+ </div>
112
+
113
+ </li>
114
+
115
+ <li>
116
+
117
+ <div id="post-503" class="list" parent="365" ancestor="">E(Dの子)
118
+
119
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
120
+
121
+ </div>
122
+
123
+ </li>
124
+
125
+ <li>
126
+
127
+ <div id="post-514" class="list" parent="503" ancestor="">F(Eの子)
128
+
129
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
130
+
131
+ </div>
132
+
133
+ </li>
134
+
135
+ </ul>
136
+
137
+ </li>
138
+
139
+
140
+
141
+ <li>
142
+
143
+ <div id="post-705" class="list" parent="0" ancestor="">Z家
144
+
145
+ <span class="my_post_num"></span><span class="my_ancestor_num"></span>
146
+
147
+ </div>
148
+
149
+ </li>
150
+
151
+
152
+
153
+ </ul>
154
+
155
+ </div>
156
+
157
+ ```
42
158
 
43
159
  エラーの箇所はJavaScriptの8行目です。
44
160
 
45
- ```html
46
-
47
- <div class="alllists">
48
-
49
- <ul>
50
-
51
-
52
-
53
- <li>
54
-
55
- <div id="post-7" class="list" parent="0" ancestor="">X家
56
-
57
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
58
-
59
- </div>
60
-
61
- <ul class="childrens">
62
-
63
- <li>
64
-
65
- <div id="post-39" class="list" parent="7" ancestor="">A
66
-
67
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
68
-
69
- </div>
70
-
71
- </li>
72
-
73
- </ul>
74
-
75
- </li>
76
-
77
-
78
-
79
- <li>
80
-
81
- <div id="post-157" class="list" parent="0" ancestor="">Y家
82
-
83
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
84
-
85
- </div>
86
-
87
- <ul class="childrens">
88
-
89
- <li>
90
-
91
- <div id="post-200" class="list" parent="157" ancestor="">B
92
-
93
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
94
-
95
- </div>
96
-
97
- </li>
98
-
99
- <li>
100
-
101
- <div id="post-354" class="list" parent="157" ancestor="">C
102
-
103
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
104
-
105
- </div>
106
-
107
- </li>
108
-
109
- <li>
110
-
111
- <div id="post-365" class="list" parent="354" ancestor="">D(Cの子)
112
-
113
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
114
-
115
- </div>
116
-
117
- </li>
118
-
119
- <li>
120
-
121
- <div id="post-503" class="list" parent="365" ancestor="">E(Dの子)
122
-
123
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
124
-
125
- </div>
126
-
127
- </li>
128
-
129
- <li>
130
-
131
- <div id="post-514" class="list" parent="503" ancestor="">F(Eの子)
132
-
133
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
134
-
135
- </div>
136
-
137
- </li>
138
-
139
- </ul>
140
-
141
- </li>
142
-
143
-
144
-
145
- <li>
146
-
147
- <div id="post-705" class="list" parent="0" ancestor="">Z家
148
-
149
- <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
150
-
151
- </div>
152
-
153
- </li>
154
-
155
-
156
-
157
- </ul>
158
-
159
- </div>
161
+ ```javascript
162
+
163
+ //➀先祖番号の連結
164
+
165
+ function getParentNums(list) {
166
+
167
+ var parent_num = list.attr('parent');
168
+
169
+ if (parent_num == "0") {
170
+
171
+ return ["0"];
172
+
173
+ }
174
+
175
+ var parent = $("#post-" + parent_num);
176
+
177
+ var parent_nums = getParentNums(parent);
178
+
179
+ parent_nums.push(parent_num);
180
+
181
+ return parent_nums;
182
+
183
+ }
184
+
185
+ $('.list').each(function() {
186
+
187
+ var my_post_num = $(this).attr('id').split('-')[1];
188
+
189
+ var list = $(this);
190
+
191
+ var parents = getParentNums(list);
192
+
193
+ var my_ancestor_num = parents.join('-');
194
+
195
+ list.attr('ancestor',my_ancestor_num);
196
+
197
+ //確認のための表示
198
+
199
+ $(this).find('.my_post_num').text(my_post_num);
200
+
201
+ $(this).find('.my_ancestor_num').text(my_ancestor_num);
202
+
203
+ });
204
+
205
+
206
+
207
+
208
+
209
+ //➁子がいたらボタンを表示
210
+
211
+ var parents = [];
212
+
213
+ $(".list").each(function() {
214
+
215
+ var parent_num = $(this).attr('parent');
216
+
217
+ parents.push( parent_num );
218
+
219
+ });
220
+
221
+ $(".list").each(function() {
222
+
223
+ var my_post_num = $(this).attr('id').split('-')[1];
224
+
225
+ if (parents.indexOf(my_post_num) >= 0){
226
+
227
+ $(this).append('<button class="opento">open</button>');
228
+
229
+ }
230
+
231
+ });
232
+
233
+
234
+
235
+
236
+
237
+ //➂openボタンをクリックしたら
238
+
239
+ $('body').on("click",".opento",function(){
240
+
241
+
242
+
243
+ //ボタン表示を切り替えて
244
+
245
+ $(this).removeClass('opento').addClass('closeto').text('close');
246
+
247
+
248
+
249
+ //子リストを開く
250
+
251
+ var click_post_num = $(this).closest('.list').attr('id').split('-')[1];
252
+
253
+ var click_ancestor_num = $(this).closest('.list').attr('ancestor');
254
+
255
+ var child_ancestor_num = click_ancestor_num+'-'+click_post_num;
256
+
257
+ $(".list").each(function() {
258
+
259
+ var ancestor_num = $(this).attr('ancestor');
260
+
261
+ if (ancestor_num == child_ancestor_num){
262
+
263
+ $(this).closest('li').slideDown();
264
+
265
+ }
266
+
267
+ });
268
+
269
+
270
+
271
+ });
272
+
273
+
274
+
275
+
276
+
277
+ //➃closeボタンをクリックしたら
278
+
279
+ $('body').on("click",".closeto",function(){
280
+
281
+
282
+
283
+ //ボタン表示を切り替えて
284
+
285
+ $(this).removeClass('closeto').addClass('opento').text('open');
286
+
287
+
288
+
289
+ //子リストを閉じる
290
+
291
+ var click_post_num = $(this).closest('.list').attr('id').split('-')[1];
292
+
293
+ var click_ancestor_num = $(this).closest('.list').attr('ancestor');
294
+
295
+ var child_ancestor_num = click_ancestor_num+'-'+click_post_num;
296
+
297
+ $(".list").each(function() {
298
+
299
+ var ancestor_num = $(this).attr('ancestor');
300
+
301
+ if (ancestor_num.match(child_ancestor_num)){
302
+
303
+ $(this).closest('li').slideUp();
304
+
305
+ $(this).closest('li').find('.closeto').removeClass('closeto').addClass('opento').text('open');
306
+
307
+ }
308
+
309
+ });
310
+
311
+
312
+
313
+ });
314
+
315
+
160
316
 
161
317
  ```
162
318
 
163
- ```javascript
164
-
165
- //➀先祖番号の連結
166
-
167
- function getParentNums(list) {
168
-
169
- var parent_num = list.attr('parent');
170
-
171
- if (parent_num == "0") {
172
-
173
- return ["0"];
174
-
175
- }
176
-
177
- var parent = $("#post-" + parent_num);
178
-
179
- var parent_nums = getParentNums(parent);
180
-
181
- parent_nums.push(parent_num);
182
-
183
- return parent_nums;
184
-
185
- }
186
-
187
- $('.list').each(function() {
188
-
189
- var my_post_num = $(this).attr('id').split('-')[1];
190
-
191
- var list = $(this);
192
-
193
- var parents = getParentNums(list);
194
-
195
- var my_ancestor_num = parents.join('-');
196
-
197
- list.attr('ancestor',my_ancestor_num);
198
-
199
- //確認のための表示
200
-
201
- $(this).find('.my_post_num').text(my_post_num);
202
-
203
- $(this).find('.my_ancestor_num').text(my_ancestor_num);
204
-
205
- });
206
-
207
-
208
-
209
-
210
-
211
- //➁子がいたらボタンを表示
212
-
213
- var parents = [];
214
-
215
- $(".list").each(function() {
216
-
217
- var parent_num = $(this).attr('parent');
218
-
219
- parents.push( parent_num );
220
-
221
- });
222
-
223
- $(".list").each(function() {
224
-
225
- var my_post_num = $(this).attr('id').split('-')[1];
226
-
227
- if (parents.indexOf(my_post_num) >= 0){
228
-
229
- $(this).append('<button class="opento">open</button>');
230
-
231
- }
232
-
233
- });
234
-
235
-
236
-
237
-
238
-
239
- //➂openボタンをクリックしたら
240
-
241
- $('body').on("click",".opento",function(){
242
-
243
-
244
-
245
- //ボタン表示を切り替えて
246
-
247
- $(this).removeClass('opento').addClass('closeto').text('close');
248
-
249
-
250
-
251
- //子リストを開く
252
-
253
- var click_post_num = $(this).closest('.list').attr('id').split('-')[1];
254
-
255
- var click_ancestor_num = $(this).closest('.list').attr('ancestor');
256
-
257
- var child_ancestor_num = click_ancestor_num+'-'+click_post_num;
258
-
259
- $(".list").each(function() {
260
-
261
- var ancestor_num = $(this).attr('ancestor');
262
-
263
- if (ancestor_num == child_ancestor_num){
264
-
265
- $(this).closest('li').slideDown();
266
-
267
- }
268
-
269
- });
270
-
271
-
272
-
273
- });
274
-
275
-
276
-
277
-
278
-
279
- //➃closeボタンをクリックしたら
280
-
281
- $('body').on("click",".closeto",function(){
282
-
283
-
284
-
285
- //ボタン表示を切り替えて
286
-
287
- $(this).removeClass('closeto').addClass('opento').text('open');
288
-
289
-
290
-
291
- //子リストを閉じる
292
-
293
- var click_post_num = $(this).closest('.list').attr('id').split('-')[1];
294
-
295
- var click_ancestor_num = $(this).closest('.list').attr('ancestor');
296
-
297
- var child_ancestor_num = click_ancestor_num+'-'+click_post_num;
298
-
299
- $(".list").each(function() {
300
-
301
- var ancestor_num = $(this).attr('ancestor');
302
-
303
- if (ancestor_num.match(child_ancestor_num)){
304
-
305
- $(this).closest('li').slideUp();
306
-
307
- $(this).closest('li').find('.closeto').removeClass('closeto').addClass('opento').text('open');
308
-
309
- }
310
-
311
- });
312
-
313
-
314
-
315
- });
316
-
317
-
318
-
319
- ```
320
-
321
319
  長くなってしまい申し訳ございませんが、どうすれば親子の数が増えても``var parent_nums = getParentNums(parent);``の部分でエラーが出ないようになるかについて、ご意見頂ければ幸いです。
322
320
 
323
321
  どうぞ宜しくお願い致します。

1

コード修正

2018/09/21 02:36

投稿

skipping
skipping

スコア14

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- Sample:[https://jsfiddle.net/tnrg6xau/](https://jsfiddle.net/tnrg6xau/)
21
+ Sample:[https://jsfiddle.net/he6pLufa/](https://jsfiddle.net/he6pLufa/)
22
22
 
23
23
 
24
24
 
@@ -64,22 +64,12 @@
64
64
 
65
65
  <div id="post-39" class="list" parent="7" ancestor="">A
66
66
 
67
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
67
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
68
68
 
69
69
  </div>
70
70
 
71
71
  </li>
72
72
 
73
- <li>
74
-
75
- <div id="post-590" class="list" parent="7" ancestor="">H
76
-
77
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
78
-
79
- </div>
80
-
81
- </li>
82
-
83
73
  </ul>
84
74
 
85
75
  </li>
@@ -90,7 +80,7 @@
90
80
 
91
81
  <div id="post-157" class="list" parent="0" ancestor="">Y家
92
82
 
93
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
83
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
94
84
 
95
85
  </div>
96
86
 
@@ -100,7 +90,7 @@
100
90
 
101
91
  <div id="post-200" class="list" parent="157" ancestor="">B
102
92
 
103
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
93
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
104
94
 
105
95
  </div>
106
96
 
@@ -110,7 +100,7 @@
110
100
 
111
101
  <div id="post-354" class="list" parent="157" ancestor="">C
112
102
 
113
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
103
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
114
104
 
115
105
  </div>
116
106
 
@@ -120,7 +110,17 @@
120
110
 
121
111
  <div id="post-365" class="list" parent="354" ancestor="">D(Cの子)
122
112
 
123
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
113
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
114
+
115
+ </div>
116
+
117
+ </li>
118
+
119
+ <li>
120
+
121
+ <div id="post-503" class="list" parent="365" ancestor="">E(Dの子)
122
+
123
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
124
124
 
125
125
  </div>
126
126
 
@@ -128,43 +128,13 @@
128
128
 
129
129
  <li>
130
130
 
131
- <div id="post-651" class="list" parent="354" ancestor="">I(Cの子)
132
-
133
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
134
-
135
- </div>
136
-
137
- </li>
138
-
139
- <li>
140
-
141
- <div id="post-503" class="list" parent="365" ancestor="">E(Dの子)
142
-
143
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
144
-
145
- </div>
146
-
147
- </li>
148
-
149
- <li>
150
-
151
131
  <div id="post-514" class="list" parent="503" ancestor="">F(Eの子)
152
132
 
153
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
133
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
154
-
134
+
155
- </div>
135
+ </div>
156
-
136
+
157
- </li>
137
+ </li>
158
-
159
- <li>
160
-
161
- <div id="post-518" class="list" parent="503" ancestor="">F(Eの子)
162
-
163
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
164
-
165
- </div>
166
-
167
- </li>
168
138
 
169
139
  </ul>
170
140
 
@@ -176,7 +146,7 @@
176
146
 
177
147
  <div id="post-705" class="list" parent="0" ancestor="">Z家
178
148
 
179
- <span class="my_post_num"></span><span class="my_ancestor_num"></span>
149
+ <span class="my_post_num">4</span><span class="my_ancestor_num"></span>
180
150
 
181
151
  </div>
182
152