2024
04
25
2011
02
15
topicPath - 目次データから上位のトピックを探す。
前回の「topicPath - 目次データの取得」の記事では、topicPath 用の HTML の構造とそこから目次データを取得する方法について説明しました。
今回は、その目次データから、上位のトピックを探す方法についてです。
前回の記事では、各トピックの目次データが次のようなオブジェクトになっていることを説明しました。
{id:id,title:title,parent:parentId}
これを具体的な例で示すと次のようになります。
[
{id:'home', title:'目次',parent:'contents'},
{id:'subcontents1', title:'目次１',parent:'home'},
{id:'subcontents2', title:'目次２',parent:'home'},
{id:'content', title:'内容', parent:'home'},
{id:'subcontents11', title:'目次１',parent:'subcontents1'},
{id:'subcontents12', title:'目次１',parent:'subcontents1'},
{id:'content1', title:'内容１',parent:'subcontents1'},
{id:'content21', title:'内容21',parent:'subcontents2'},
{id:'content22', title:'内容22',parent:'subcontents2'}
]
{id:'subcontents1', title:'目次１',parent:'home'},
{id:'subcontents2', title:'目次２',parent:'home'},
{id:'content', title:'内容', parent:'home'},
{id:'subcontents11', title:'目次１',parent:'subcontents1'},
{id:'subcontents12', title:'目次１',parent:'subcontents1'},
{id:'content1', title:'内容１',parent:'subcontents1'},
{id:'content21', title:'内容21',parent:'subcontents2'},
{id:'content22', title:'内容22',parent:'subcontents2'}
]
現在表示されているトピックの ID が「content22」なら、その親の ID は「subcontents2」ということがわかります。
すなわち、ID を投入して、親の IDを取得して その属するオブジェクトを配列に加えます。取得した親の ID をまた投入して、親の IDを取得して さらに配列に加えます。それを繰り返して最後に「home」を ID とするオブジェクトを配列に加えたら終わりです。
つまり、結果を引数に再度入れる再帰的な関数を１つ作ればいいということ。
この関数を searchAncestor としましょう。
また、上記のような目次データを arr とし、オブジェクトを格納する配列を paths とすると、次のように記述できます。
function searchAncestor(s){
for(var i=0;i<arr.length;i++){
if(arr[i].id==s){
paths.push(arr[i]);
if(s!=='home'){
searchAncestor(arr[i].parent);
}else{
return;
}
}
}
}
for(var i=0;i<arr.length;i++){
if(arr[i].id==s){
paths.push(arr[i]);
if(s!=='home'){
searchAncestor(arr[i].parent);
}else{
return;
}
}
}
}
paths=[];
searchAncestor('content22')
を実行すれば、paths の内容は次のようになります。
[
{id:'content22', title:'内容22',parent:'subcontents2'},
{id:'subcontents2', title:'目次２',parent:'home'},
{id:'home', title:'目次',parent:'contents'}
]
{id:'content22', title:'内容22',parent:'subcontents2'},
{id:'subcontents2', title:'目次２',parent:'home'},
{id:'home', title:'目次',parent:'contents'}
]
次は、このデータを使って、HTMLに追加する要素を作成することになります。
PR
2011/02/15 (Tue.) Trackback() Comment(0) JavaScript
Comments
Trackback
Trackback for this entry：
