DOMへの追加方法について

質問

知識のある方に是非ともご教示いただきたいのですが、
以下の通りのリストがあるとしまして、

<dl id="hoge">
<dd>222</dd>
<dd>333</dd>
<dd>AAA</dd>
<dd>AAB</dd>
<dd>BBB</dd>
<dd>BBC</dd>
<dd>CCC</dd>
<dd>CCD</dd>
</dl>

これらを以下のように数字から始まるなら「数字からはじまる」
Aから始まるなら「Aから始まる」と<dt>を入れたいと考えています。
且つそのdtにはlistという連番のIDをつけていきたいのですが、
どうjqueryで組めば良いか教えて頂けませんでしょうか。
実際どうしたいかというのは、以下のとおりとなります。

<dl id="hoge">
<dt id="list1">数字から始まる</dt>
<dd>222</dd>
<dd>333</dd>
<dt id="list2">Aから始まる</dt>
<dd>AAA</dd>
<dd>AAB</dd>
<dt id="list3">Bから始まる</dt>
<dd>BBB</dd>
<dd>BBC</dd>
<dt id="list4">Cから始まる</dt>
<dd>CCC</dd>
<dd>CCD</dd>
</dl>

英語に関しては、文字列の1番目を取得して、文字列の1番目 + 「から始まる」
といった形にしたいと考えています。
知識のある方、お力を貸して頂ければと思います。
宜しくお願い致します。

回答No.5

think49 · ベストアンサー

#2, 3 です。

> Aから始まるの後に、AAA, AAB と並ぶようにしたいです
AAA, AAB の順でソートされる実装になっていると思うのですが、期待通りに動かないHTMLを開示できるでしょうか。

■JavaScriptの問題点
#2 で述べたように基本的には JavaScript で実装しない方が良い案件に思えましたが、この辺りはどうでしょうか。

Re: yukiponta さん

回答No.4

think49

#3 です。
id 初期化が漏れていたので修正しました。
https://jsfiddle.net/gohva2rm/1/

Re: yukiponta さん

補足

ご回答いただきありがとうございます。
順序保証はjsでソートできるので問題なかったのですが、対応していただきありがとうございます。

今AAAとAABの上にそれぞれAからはじまるというdtが記載されていますが、
Aから始まるの後に、
AAA
AAB
と並ぶようにしたいです。
こちら再度お願いできませんでしょうか。

回答No.3

think49

ASCIIコード順に並んでいますが、順序保証あるのでしょうか。
汎用性を踏まえると事前にソートするのが良さそうですが…。
https://jsfiddle.net/gohva2rm/

```html
<dl id="hoge">
　<dd>222</dd>
　<dd>AAA</dd>
　<dd>BBB</dd>
　<dd>CCD</dd>
　<dd>333</dd>
　<dd>BBC</dd>
　<dd>AAB</dd>
　<dd>CCC</dd>
</dl>

<script>
'use strict';
(function (sortfn) {
　var doc = document,
　　　dd = doc.querySelectorAll('#hoge>dd'),
　　　dt = doc.createElement('dt'),
　　　df = doc.createDocumentFragment(),
　　　parentNode = dd[0].parentNode;

　dd = Array.prototype.slice.call(dd).sort(sortfn); // 配列化してASCIIコード順にソートする
　dt.appendChild(doc.createTextNode('dummy'));　// dt 要素ノードの雛形

　for (var i = 0, l = dd.length, target, firstChar, beforeChar; i < l; ++i) {
　　target = dd[i];
　　firstChar = target.firstChild.data[0];

　　if (/^\d$/.test(firstChar)) {
　　　firstChar = '数字';
　　}

　　if (firstChar !== beforeChar) {
　　　dt = dt.cloneNode(true);
　　　dt.firstChild.data = firstChar + 'から始まる';
　　　df.appendChild(dt);
　　　df.appendChild(target);
　　　beforeChar = firstChar;
　　} else {
　　　df.appendChild(target);
　　}
　}

　parentNode.appendChild(df);
}(function sortfn (a, b) { return a.firstChild.data > b.firstChild.data; }));
</script>
```

実際のところ、JavaScriptが無効化されれば実行されないので他の手段も検討する余地があるかもしれません。

- サーバサイドでdd要素を出力しているのならサーバサイドで <dt>***から始まる</dt>
- 静的HTMLでdt要素を挿入する手間を惜しむのならJavaScriptで生成した後に静的HTMLとして貼り付ける

Re: yukiponta さん

回答No.2

babu_baboo

#1です。まちがえた
return /\d+/.test (t) ? '数値': t;
return /\d/.test (t) ? '数値': t;

for (var idx, t = null, i = 0; c = cs[i]; i++)
for (var idx=0, t = null, i = 0; c = cs[i]; i++)

癖は治らず

回答No.1

babu_baboo

どうしてもjQueryが必要ですか？　必要ならば他の誰かにお任せします。

function firstCharType (e) {
　var t = e.textContent.charAt (0);
　return /\d+/.test (t) ? '数値': t;
}

function appendDT (e, c, i) {
　var dt = e.ownerDocument.createElement ('dt');
　dt.textContent = c + 'から始まる';
　dt.id = 'list' + i;
　e.parentNode.insertBefore (dt, e);
}

var dd = Array.prototype.slice.call (document.querySelectorAll ('#hoge dd'));
var cs = dd.map (firstCharType);

for (var idx, t = null, i = 0; c = cs[i]; i++)
　if (c !== t)
　　appendDT (dd[i], c, idx++), t = c;