配列をリスト構造にする
http://oshiete.goo.ne.jp/qa/6983274.html
きっとそれは、リスト構造。
ちょっとだけ話題の「初心者を脱出」、基準がわからない。
「中級を脱出したい」とした場合、何を基準にしたら良いのだろう？
自分目線で、そこは遥か向こうの岸にあるようだ。
その後も、気づけば独りでにやけています。
「何か良いことでもあったの？」そう言われて、ちと恥ずかしい。
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>テスト IMGタグの後に文字列出力</h1>
<p>
<img src="../images/logo1.gif" title="testLogo1" alt="Logo1">
<img src="../images/logo2.gif" title="testLogo2" alt="Logo2">
</p>
<script>
// 配列をリスト構造にする
function toListStructure (list, root) {
var doc = root.ownerDocument;
var frg = doc.createDocumentFragment ();
var r;
var li;
for (var i = 0, I = list.length; i < I; i+= 1) {
r = list[i];
li = doc.createElement ('li');
switch (true) {
case ('string' === typeof r) :
li.appendChild (doc.createTextNode (r || ''));
break;
case (r instanceof Array) :
li.appendChild (arguments.callee (r, root.cloneNode (false)));
break;
case (1 === r.nodeType) :
case (3 === r.nodeType) :
li.appendChild (r);
break;
default :
}
frg.appendChild (li);
}
root.appendChild (frg);
return root;
}
function hoge (target) {
var doc = target.ownerDocument;
var imgs = Array.prototype.slice.call (target.querySelectorAll ('img'), 0);
var list = imgs.map (function (e) { return [e.title, e, e.alt]; });
var ul = toListStructure (list, doc.createElement ('ol'));
target.parentNode.replaceChild (ul, target);
}
hoge (document.querySelector('p'));
</script>
</body>
