teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コードに誤りがあった為、修正

2016/02/10 14:48

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,5 +1,7 @@
1
1
  jQuery はテキストノードAPIがほとんどないので DOM API を利用してください。
2
2
 
3
+ - [Edit fiddle - JSFiddle](https://jsfiddle.net/boo330x8/)
4
+
3
5
  ```HTML
4
6
  <div class="AAA">
5
7
  <div class="BBB">
@@ -7,26 +9,71 @@
7
9
  </div>
8
10
  商品名<br><span>価格</span>
9
11
  </div>
10
-
12
+ <div class="AAA">
13
+ <div class="BBB">
14
+ <a href=""><img src=""></a>
15
+ </div>
16
+ 商品名<br><span>価格</span>
17
+ </div>
11
18
  <script>
12
19
  'use strict';
13
- jQuery('.AAA>.BBB').each(function () {
20
+ (function () {
14
- var node = this,
21
+ var doc = document,
15
- div = this.ownerDocument.createElement('div');
22
+ div = doc.createElement('div');
16
23
 
17
24
  div.className = 'CCC';
18
25
 
26
+ for (var i = 0, aaas = doc.querySelectorAll('.AAA'), l = aaas.length, aaa; i < l; ++i) {
27
+ aaa = aaas[i];
28
+
29
+ for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
30
+ childNode = childNodes[j];
31
+
32
+ if (childNode.classList && childNode.classList.contains('BBB')) {
19
- while (node = node.nextSibling) {
33
+ while (++j < m--) {
34
+ div.appendChild(childNodes[j]);
35
+ }
36
+
37
+ if (div.childNodes.length) {
20
- div.appendChild(node);
38
+ aaa.appendChild(div);
39
+ }
40
+ break;
41
+ }
42
+ }
21
43
  }
44
+ }());
45
+ </script>
46
+ ```
22
47
 
48
+ **(2016/02/10 23:48追記)**
49
+ コードに誤りがあった為、`querySelectorAll()` で書き直しました。
50
+ `Array.prototype.forEach` を使うと次のように書けます。
51
+
52
+ - [Edit fiddle - JSFiddle](https://jsfiddle.net/boo330x8/1/)
53
+
54
+ ```JavaScript
55
+ 'use strict';
56
+ Array.prototype.forEach.call(document.querySelectorAll('.AAA'), function (aaa) {
57
+ var doc = aaa.ownerDocument,
58
+ div = doc.createElement('div');
59
+
60
+ div.className = 'CCC';
61
+
62
+ for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
63
+ childNode = childNodes[j];
64
+
65
+ if (childNode.classList && childNode.classList.contains('BBB')) {
66
+ while (++j < m--) {
67
+ div.appendChild(childNodes[j]);
68
+ }
69
+
23
- if (this.childNodes.length) {
70
+ if (div.childNodes.length) {
24
- this.parentNode.appendChild(div);
71
+ aaa.appendChild(div);
72
+ }
73
+ break;
74
+ }
25
75
  }
26
76
  });
27
- </script>
28
77
  ```
29
78
 
30
- ちなみに、jQuery を使わずとも `querySelectorAll, Array.prototype.forEach` でも書けます。
31
-
32
79
  Re: MizukiMinezaki さん

1

\.BBB が lastChild だった場合の例外処理コード追加

2016/02/10 14:48

投稿

think49
think49

スコア18194

answer CHANGED
@@ -20,7 +20,9 @@
20
20
  div.appendChild(node);
21
21
  }
22
22
 
23
+ if (this.childNodes.length) {
23
- this.parentNode.appendChild(div);
24
+ this.parentNode.appendChild(div);
25
+ }
24
26
  });
25
27
  </script>
26
28
  ```