ども。鉄王です。
かねてやってみたいと思っていた（といってもたいそうなことではないが）jQueryを使ってのパンくずリスト実装、という実験のレポートです。
今まで、パンくずリストを作るとき、わりとよく知られる方法にしたがって
<ul> <li>第1階層のタイトル</li> <li>></li> <li>第2階層のタイトル</li> <li>></li> <li>第3階層のタイトル</li> </ul>
みたいな感じで、セパレータまで一緒に <li> タグに入れ、CSSのdisplayプロパティで横一列に並べるということをやってました。
でも、考えてみるとこれって変。
セパレータ自体、文書の要素として特に意味を持っているものではないので、本来であれば <li> タグでマークアップするべきものではないんですよね。ここはやはり、ページタイトルだけを <li> で並べたい。
そんなふうにモヤモヤ思いながら、なんとかすっきりと解決できないか……と考えた結果が、jQueryを使っての実装でした。グダグダなソースで恐縮ですが、備忘録を兼ねて掲載しておきます。ご利用は計画的に 
なお、jQuery本体は1.2.6を使用。IE 6・7とFirefox 2・3、Safari 3で検証ずみです。
■HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQueryの疑似クラス指定でパンくずリストを作ってみるテスト</title> <link rel="stylesheet" href="./style.css" type="text/css" media="screen" /> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./config.js"></script> </head> <body> <div id="footprint"> <p><strong>現在位置：</strong></p ><ol ><li><a href="#">第1階層のタイトル</a></li ><li><a href="#">第2階層のタイトル</a></li ><li>第3階層のタイトル</li ></ol> </div> </body> </html>
■CSS（style.css）
@charset "UTF-8"; #footprint p { display: inline; } #footprint ol { display: inline; margin-left: 0em; padding-left: 0em; } #footprint ol li { display: inline; list-style: none; } .separator { padding: 0em 0.5em 0em 0.5em; }
■jQueryの設定ファイル（config.js）
$(function() { $('#footprint ol li:not(:last)').append('<span class="separator">></span>'); });
jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/
