JavaScript(jQuery)を使い、FAQの冒頭にある、よくある質問一覧を自動で作りたい
FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。
たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、
クリックするとその質問のアンカー位置に飛ばせるようにすれば、
更新も簡単。質問と解答を一回、追記するだけでよくなります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="qList"></ul>
<dl>
<dt>電卓とは何ですか</dt>
<dd>電卓（でんたく、Calculator）は、計算の補助をするための道具のひとつ。
電子式卓上計算機（でんししきたくじょうけいさんき）の略であるが、1979年（昭和54年）にJIS B0117で
「電卓」が正式な名称となりました。（ウィキペディアより）</dd>
<dt>DENTAKUとは何ですか</dt>
<dd>電卓 (DENTAKU, 英/独：Pocket Calculator/Taschenrechner)はドイツの音楽グループ「クラフトワーク」の楽曲。
日本語の歌詞が特徴。（ウィキペディアより）</dd>
</dl>
$(function(){
//各質問のアンカーリンクのとび先となるidを付加
$('dd').each(function(i){
var len = i+1
if(len < 10)
len = "0"+len;
var ref = "#QA"+len;
$('dt').eq(i).prepend('質問'+len+':').attr({id:"QA"+len});
$('dd').eq(i).prepend('回答'+len+':');
//Q(質問)のテキストを取得
var qTxt = $('dt').eq(i).html();
//liをappend
$('ul#qList').append('<li>');
//liの中身（aタグ+質問内容）を生成
$('ul#qList li').eq(i).html('<a>'+qTxt+'</a>');
//aタグのとび先を指定
$('ul#qList li a').eq(i).attr({href:"#QA"+len});
});
});
デモ
