teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問各要素にn個ずつdivで囲んだpを配置できない

編集履歴

質問編集履歴

8

修正

2021/10/18 23:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -174,6 +174,27 @@
174
174
  ```
175
175
  とエラーが出てしまいました。div.appendChild(tp);のところです。
176
176
  何が違うのでしょうか。
177
+ ```js
178
+ for (let cc of document.querySelectorAll('.cc')) {
179
+ let tp = [...cc.children].filter(child => child.matches('p'));
180
+ for (let p of tp.slice(0, 5)) {
181
+ if (tp.length > 0) {
182
+ while (tp.length) {
183
+ let div = document.createElement('div');
184
+ cc.appendChild(div);
185
+ tp = tp.slice(5);
186
+ div.appendChild(tp);
187
+ }
188
+ }
189
+ };
190
+ }
191
+ ```
192
+ としたところ、
193
+ ```error
194
+ Node.appendChild: Argument 1 is not an object.
195
+ ```
196
+ とエラーが出てしまいました。div.appendChild(tp);　のところです。
197
+ tp の値が違うのでしょうか。
177
198
 
178
199
  ### 補足情報（FW/ツールのバージョンなど）
179
200
  firefox 最新版、Safari 604.1

7

修正

2021/10/18 23:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -153,8 +153,27 @@
153
153
  ```error
154
154
  Node.appendChild: Argument 1 is not an object.
155
155
  ```
156
+ ```js
157
+ for (let cc of document.querySelectorAll('.cc')) {
158
+ let tp = [...cc.children].filter(child => child.matches('p'));
159
+ for (let p of tp.slice(0, 5)) {
160
+ tp = tp.slice(5);
161
+ if (tp.length > 0) {
162
+ while (tp.length) {
163
+ let div = document.createElement('div');
164
+ cc.appendChild(div);
165
+ div.appendChild(tp);
166
+ }
167
+ }
168
+ };
169
+ }
170
+ ```
171
+ としたところ、
172
+ ```error
173
+ Node.appendChild: Argument 1 is not an object.
174
+ ```
175
+ とエラーが出てしまいました。div.appendChild(tp);のところです。
176
+ 何が違うのでしょうか。
156
177
 
157
-
158
-
159
178
  ### 補足情報（FW/ツールのバージョンなど）
160
179
  firefox 最新版、Safari 604.1

6

2021/10/18 15:37

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -51,6 +51,18 @@
51
51
  <p>The quick brown fox jumps over the lazy dog</p>
52
52
  <p>The quick brown fox jumps over the lazy dog</p>
53
53
  </div>
54
+ <div class="cc">
55
+ <p>The quick brown fox jumps over the lazy dog</p>
56
+ <p>The quick brown fox jumps over the lazy dog</p>
57
+ <p>The quick brown fox jumps over the lazy dog</p>
58
+ <p>The quick brown fox jumps over the lazy dog</p>
59
+ <p>The quick brown fox jumps over the lazy dog</p>
60
+ <p>The quick brown fox jumps over the lazy dog</p>
61
+ <p>The quick brown fox jumps over the lazy dog</p>
62
+ <p>The quick brown fox jumps over the lazy dog</p>
63
+ <p>The quick brown fox jumps over the lazy dog</p>
64
+ <p>The quick brown fox jumps over the lazy dog</p>
65
+ </div>
54
66
  ```
55
67
  想定しているHTML
56
68
  ```HTML
@@ -70,6 +82,22 @@
70
82
  <p>The quick brown fox jumps over the lazy dog</p>
71
83
  </div>
72
84
  </div>
85
+ <div class="cc">
86
+ <div>
87
+ <p>The quick brown fox jumps over the lazy dog</p>
88
+ <p>The quick brown fox jumps over the lazy dog</p>
89
+ <p>The quick brown fox jumps over the lazy dog</p>
90
+ <p>The quick brown fox jumps over the lazy dog</p>
91
+ <p>The quick brown fox jumps over the lazy dog</p>
92
+ </div>
93
+ <div>
94
+ <p>The quick brown fox jumps over the lazy dog</p>
95
+ <p>The quick brown fox jumps over the lazy dog</p>
96
+ <p>The quick brown fox jumps over the lazy dog</p>
97
+ <p>The quick brown fox jumps over the lazy dog</p>
98
+ <p>The quick brown fox jumps over the lazy dog</p>
99
+ </div>
100
+ </div>
73
101
  ```
74
102
 
75
103
  ### 試したこと

5

修正

2021/10/18 11:14

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -37,6 +37,40 @@
37
37
  til.appendChild(div);
38
38
  });
39
39
  ```
40
+ 元のHTML
41
+ ```html
42
+ <div class="cc">
43
+ <p>The quick brown fox jumps over the lazy dog</p>
44
+ <p>The quick brown fox jumps over the lazy dog</p>
45
+ <p>The quick brown fox jumps over the lazy dog</p>
46
+ <p>The quick brown fox jumps over the lazy dog</p>
47
+ <p>The quick brown fox jumps over the lazy dog</p>
48
+ <p>The quick brown fox jumps over the lazy dog</p>
49
+ <p>The quick brown fox jumps over the lazy dog</p>
50
+ <p>The quick brown fox jumps over the lazy dog</p>
51
+ <p>The quick brown fox jumps over the lazy dog</p>
52
+ <p>The quick brown fox jumps over the lazy dog</p>
53
+ </div>
54
+ ```
55
+ 想定しているHTML
56
+ ```HTML
57
+ <div class="cc">
58
+ <div>
59
+ <p>The quick brown fox jumps over the lazy dog</p>
60
+ <p>The quick brown fox jumps over the lazy dog</p>
61
+ <p>The quick brown fox jumps over the lazy dog</p>
62
+ <p>The quick brown fox jumps over the lazy dog</p>
63
+ <p>The quick brown fox jumps over the lazy dog</p>
64
+ </div>
65
+ <div>
66
+ <p>The quick brown fox jumps over the lazy dog</p>
67
+ <p>The quick brown fox jumps over the lazy dog</p>
68
+ <p>The quick brown fox jumps over the lazy dog</p>
69
+ <p>The quick brown fox jumps over the lazy dog</p>
70
+ <p>The quick brown fox jumps over the lazy dog</p>
71
+ </div>
72
+ </div>
73
+ ```
40
74
 
41
75
  ### 試したこと
42
76
  forEach で囲むと空っぽになってしまいます。
@@ -73,7 +107,26 @@
73
107
  }
74
108
  ```
75
109
  としたところ、重すぎてページが読み込まれませんでした。
110
+ ```js
111
+ for (let cc of document.querySelectorAll('.cc')) {
112
+ let tp = [...cc.children].filter(child => child.matches('p'));
113
+ tp = tp.slice(5);
114
+ for (let p of tp.slice(0, 5)) {
115
+ let div = document.createElement('div');
116
+ for (let i = 0; i < 5; i = i + 1) {
117
+ div.appendChild(tp[i]);
118
+ };
119
+ cc.appendChild(div);
120
+ };
121
+ }
122
+ ```
123
+ としたところ、.cc の初めの５つのpのみ、divで囲まれた状態になりました。
124
+ エラーは以下です。
125
+ ```error
126
+ Node.appendChild: Argument 1 is not an object.
127
+ ```
76
128
 
77
129
 
130
+
78
131
  ### 補足情報（FW/ツールのバージョンなど）
79
132
  firefox 最新版、Safari 604.1

4

修正

2021/10/18 10:39

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -47,22 +47,32 @@
47
47
 
48
48
  ```js
49
49
  for (let cc of document.querySelectorAll('.cc')) {
50
- let t_p = [...cc.children].filter(child => child.matches('p'));
50
+ let tp = [...cc.children].filter(child => child.matches('p'));
51
- if(t_p.length > 0) {
51
+ if (tp.length > 0) {
52
- for (let i = 0; i < 5; i++) {
53
- var div = document.createElement('div');
52
+ let div = document.createElement('div');
53
+ for (let i = 0; i < 5; i = i + 1) {
54
- div.appendChild(t_p[i]);
54
+ div.appendChild(tp[i]);
55
+ cc.appendChild(div);
55
56
  }
56
57
  }
57
- cc.appendChild(div);
58
58
  }
59
59
  ```
60
- としたところ以下のエラーが出ました。
60
+ としたところ最初の５つしかdivで囲まれませんでした。
61
- ```error
61
+ ```js
62
+ for (let cc of document.querySelectorAll('.cc')) {
63
+ let tp = [...cc.children].filter(child => child.matches('p'));
64
+ if (tp.length > 0) {
65
+ while (tp.length) {
66
+ let div = document.createElement('div');
62
- Node.appendChild: Argument 1 is not an object.
67
+ for (let i = 0; i < 5; i = i + 1 ) {
68
+ div.appendChild(tp[i]);
69
+ cc.appendChild(div);
70
+ }
71
+ };
72
+ }
73
+ }
63
74
  ```
64
- これは
65
- if(t_p.length > 0) {} が間違っているということですよね？　難しくてどこが違うのか分かりません。
75
+ としたところ、重すぎてページが読み込まれませんでした。
66
76
 
67
77
 
68
78
  ### 補足情報（FW/ツールのバージョンなど）

3

修正

2021/10/17 00:08

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -61,6 +61,9 @@
61
61
  ```error
62
62
  Node.appendChild: Argument 1 is not an object.
63
63
  ```
64
+ これは
65
+ if(t_p.length > 0) {} が間違っているということですよね？　難しくてどこが違うのか分かりません。
64
66
 
67
+
65
68
  ### 補足情報（FW/ツールのバージョンなど）
66
69
  firefox 最新版、Safari 604.1

2

修正

2021/10/16 16:16

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -57,7 +57,10 @@
57
57
  cc.appendChild(div);
58
58
  }
59
59
  ```
60
- としたところ空っぽのままでした。どこが違うのか分かりませんでした。
60
+ としたところ以下のエラーが出ました。
61
+ ```error
62
+ Node.appendChild: Argument 1 is not an object.
63
+ ```
61
64
 
62
65
  ### 補足情報（FW/ツールのバージョンなど）
63
66
  firefox 最新版、Safari 604.1

1

補足

2021/10/16 16:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -44,5 +44,20 @@
44
44
 
45
45
  どうすればループさせることができますでしょうか。
46
46
 
47
+
48
+ ```js
49
+ for (let cc of document.querySelectorAll('.cc')) {
50
+ let t_p = [...cc.children].filter(child => child.matches('p'));
51
+ if(t_p.length > 0) {
52
+ for (let i = 0; i < 5; i++) {
53
+ var div = document.createElement('div');
54
+ div.appendChild(t_p[i]);
55
+ }
56
+ }
57
+ cc.appendChild(div);
58
+ }
59
+ ```
60
+ としたところ空っぽのままでした。どこが違うのか分かりませんでした。
61
+
47
62
  ### 補足情報（FW/ツールのバージョンなど）
48
63
  firefox 最新版、Safari 604.1