ページトップへ移動するリンクを書いてみるjQuery


より、ユーザーに便利に利用してもらおうとすると、気を使っていたとしても、htmlのソースは、かなりひどくなってくる事があります。

htmlは、言うまでもなくハイパーテキストですから、リンクは、ドキュメントに100個ぐらい当たり前にあるわけです。
自ファイル内のリンクも、見出しや、脚注、ページトップへの戻りリンクなど、にぎわいます。

こういう部分は、何か工夫してもいいのではないだろうかと思ったりして、昨日、世迷言を書いてしまったので、ちょっと書きます。

以下のコードをhead内に貼り付けると

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
   jQuery(function(){
        jQuery("h4").each(function(i){
			var num = "test" + i;
 	      	$(this).attr("id", num ).prepend('<a href="#">△</a>&nbsp;');
        });
	});
})(jQuery);
</script>
body内に以下のようにコードを書くと
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>


こうなっちゃいます。
<h4 id="test0"><a href="#"></a>&nbsp;test</h4>
<h4 id="test1"><a href="#"></a>&nbsp;test</h4>
<h4 id="test2"><a href="#"></a>&nbsp;test</h4>
<h4 id="test3"><a href="#"></a>&nbsp;test</h4>
<h4 id="test4"><a href="#"></a>&nbsp;test</h4>
<h4 id="test5"><a href="#"></a>&nbsp;test</h4>
<h4 id="test6"><a href="#"></a>&nbsp;test</h4>
<h4 id="test7"><a href="#"></a>&nbsp;test</h4>
<h4 id="test8"><a href="#"></a>&nbsp;test</h4>
<h4 id="test9"><a href="#"></a>&nbsp;test</h4>
<h4 id="test10"><a href="#"></a>&nbsp;test</h4>

<h4 id="test11"><a href="#"></a>&nbsp;test</h4>

IE7で動作はしますがソースを見ても、最初に書いたようにしか見えません。FireFoxコンテキストメニューから、選択範囲のDOMソースを見る。などで見てくださいね。

使い時です。jQuery