javascript 世界難題の1つ ul li 入れ子問題

投稿日時:2014年6月14日 カテゴリー:JavaScript

壮大に、釣りを入れましたが、私個人的に教えてほしいので有識者のかた、このブログを見ていたらぜひともお願いします。

お題

h1 ~ h6 を以下のような ul li の入れ子構造を表示する関数を javascript(またはJavaScript のフレームワーク)で作りなさい。

<ul>
<li>h1:タイトル1
   <ul>
   <li>h2:タイトル2</li>
   </ul>
</li>
<li>h1:タイトル3</li>
<li>h1:タイトル4
   <ul>
   <li>h2:タイトル5
      <ul>
      <li>h3:タイトル6</li>
      </ul>
   </li>
   </ul>
</li>
</ul>

関数の引数は配列を持ち、配列には hx にアクセスできるエレメントが格納されているものとします。

配列の要素は表示順にソートされているものとします。

 

ちなみに私が作ったのが以下。

フレームワークは jQuery です。

//文字整形がめんどくさいので、data 配列にはオブジェクトを格納することにします。
// オブジェクト{element:element, header:1}
// data[i].element は Jquery のエレメントにアクセス
// data[i].header は hx の x を格納。h3 の場合は 3

function(data){

var count = 0;
var currentHeader = 1; //現在の階層
var chage = true;
var output='<ul>';

while(count<=data.length-1){

   if(currentHeader == data[count].header){//現在の階層と同じ場合 <li></li> を挿入

   if(!chage)output+='</li>';

      output+='<li>'+data[count].element.text();

      count++;
      chage = false;

   }else if(currentHeader < data[count].header){//現在の階層より下の場合 <ul>挿入

      output+='<ul>';
      currentHeader++
      chage = true;

   }else{//現在の階層より上の階層の場合。li ul を閉じる。

      output+='</li></ul>';
      currentHeader--;
      chage = false;

   }

}

while(currentHeader!=1){//最後に入れ子を閉じる
   output+='</li></ul>';
   currentHeader--;
}

return output+='</li></ul>';

};

どうですか、ここまできたないソースはめったにお目にかかれませんよ。
しかもたぶんバグありますよ。
再帰関数とか、jQuery のメソッドとか色々使うことを考えたけど、なんかうまくいかなかった。
きれいにまとめられる方法があるならぜひとも、教えてください。


コメントを残す