忍者ブログ

2018
09
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/09/24 (Mon.)

2011
02
04

topicPath - 目次データの取得

前回の「トピックパス/TopicPath」の記事では、topicPath を紹介しました。今後、何回かに分けて、そのスクリプトの考え方を説明します。今回は、基礎となる「
目次データの取得」についてです。

■ topicPath を利用するHTMLの構造

topicPath を利用する場合、HTMLの構造を次のように構成する必要があります。
(リスト中の#は、それに続く名前を id属性とする要素を意味します)

#topicPath
#contents
  ul(#home)
   li>a(href:#subcontents1)
   li>a(href:#subcontents2)
   li>a(href:#content)
  ul(#subcontents1)
   li>a(href:#subcontents11)
   li>a(href:#subcontents12)
   li>a(href:#content1)
  ul(#subcontents2)
   li>a(href:#contents21)
   li>a(href:#contents22)
  #content
  #content1
  #content21
  #content22

#topicPathは、トピックパスを表示する領域です。
#contentsは、目次とトピックをないようとする領域です。

■ 目次データの取得
HTMLが上記のような構造ならば、これから目次データを取得することは簡単です。
すなわち、#contents の中の UL要素の中にある A要素に着目します。

A要素は、リンク先の id 属性を href 属性に持っています。そして、その innerHTML は、リンク先のタイトルと通常、一致します。これで、id と title を項目に持つレコードが作成できます。

さらに、このレコードに、親の idを持たせれば、親子関係も保持するレコードになります。

topicPath では、このレコードの1行をオブジェクトとして把握します。すなわち、次のようなスタイルです。

{id:id,title:title,parent:parentId}

topicPath は、このオブジェクトを要素として、「目次データ」配列に格納します。
そして、この「目次データ」配列を基礎データとして、トピックパスを作成します。

次回は、「目次データ」から親子関係を遡って、先祖を探す方法を説明します。


PR

2011/02/04 (Fri.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

08 2018/09 10
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア