回答編集履歴

2

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

2016/02/10 14:48

投稿

think49
think49

スコア18166

test CHANGED
@@ -1,4 +1,8 @@
1
1
  jQuery はテキストノードAPIがほとんどないので DOM API を利用してください。
2
+
3
+
4
+
5
+ - [Edit fiddle - JSFiddle](https://jsfiddle.net/boo330x8/)
2
6
 
3
7
 
4
8
 
@@ -16,17 +20,27 @@
16
20
 
17
21
  </div>
18
22
 
23
+ <div class="AAA">
19
24
 
25
+ <div class="BBB">
26
+
27
+ <a href=""><img src=""></a>
28
+
29
+ </div>
30
+
31
+ 商品名<br><span>価格</span>
32
+
33
+ </div>
20
34
 
21
35
  <script>
22
36
 
23
37
  'use strict';
24
38
 
25
- jQuery('.AAA>.BBB').each(function () {
39
+ (function () {
26
40
 
27
- var node = this,
41
+ var doc = document,
28
42
 
29
- div = this.ownerDocument.createElement('div');
43
+ div = doc.createElement('div');
30
44
 
31
45
 
32
46
 
@@ -34,21 +48,43 @@
34
48
 
35
49
 
36
50
 
37
- while (node = node.nextSibling) {
51
+ for (var i = 0, aaas = doc.querySelectorAll('.AAA'), l = aaas.length, aaa; i < l; ++i) {
38
52
 
53
+ aaa = aaas[i];
54
+
55
+
56
+
57
+ for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
58
+
59
+ childNode = childNodes[j];
60
+
61
+
62
+
63
+ if (childNode.classList && childNode.classList.contains('BBB')) {
64
+
65
+ while (++j < m--) {
66
+
67
+ div.appendChild(childNodes[j]);
68
+
69
+ }
70
+
71
+
72
+
73
+ if (div.childNodes.length) {
74
+
39
- div.appendChild(node);
75
+ aaa.appendChild(div);
76
+
77
+ }
78
+
79
+ break;
80
+
81
+ }
82
+
83
+ }
40
84
 
41
85
  }
42
86
 
43
-
44
-
45
- if (this.childNodes.length) {
46
-
47
- this.parentNode.appendChild(div);
48
-
49
- }
50
-
51
- });
87
+ }());
52
88
 
53
89
  </script>
54
90
 
@@ -56,7 +92,65 @@
56
92
 
57
93
 
58
94
 
95
+ **(2016/02/10 23:48追記)**
96
+
97
+ コードに誤りがあった為、`querySelectorAll()` で書き直しました。
98
+
59
- ちなみに、jQuery を使わずとも `querySelectorAll, Array.prototype.forEach` でも書けます。
99
+ `Array.prototype.forEach` を使うと次のように書けます。
100
+
101
+
102
+
103
+ - [Edit fiddle - JSFiddle](https://jsfiddle.net/boo330x8/1/)
104
+
105
+
106
+
107
+ ```JavaScript
108
+
109
+ 'use strict';
110
+
111
+ Array.prototype.forEach.call(document.querySelectorAll('.AAA'), function (aaa) {
112
+
113
+ var doc = aaa.ownerDocument,
114
+
115
+ div = doc.createElement('div');
116
+
117
+
118
+
119
+ div.className = 'CCC';
120
+
121
+
122
+
123
+ for (var j = 0, childNodes = aaa.childNodes, m = childNodes.length, childNode, div = div.cloneNode(false); j < m; ++j) {
124
+
125
+ childNode = childNodes[j];
126
+
127
+
128
+
129
+ if (childNode.classList && childNode.classList.contains('BBB')) {
130
+
131
+ while (++j < m--) {
132
+
133
+ div.appendChild(childNodes[j]);
134
+
135
+ }
136
+
137
+
138
+
139
+ if (div.childNodes.length) {
140
+
141
+ aaa.appendChild(div);
142
+
143
+ }
144
+
145
+ break;
146
+
147
+ }
148
+
149
+ }
150
+
151
+ });
152
+
153
+ ```
60
154
 
61
155
 
62
156
 

1

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

2016/02/10 14:48

投稿

think49
think49

スコア18166

test CHANGED
@@ -42,7 +42,11 @@
42
42
 
43
43
 
44
44
 
45
+ if (this.childNodes.length) {
46
+
45
- this.parentNode.appendChild(div);
47
+ this.parentNode.appendChild(div);
48
+
49
+ }
46
50
 
47
51
  });
48
52