リストをリンクに変身させるjQuery

JAVAのヘビーユーザーでフレームワークSeasarの先導者でもあるアルファブロガー比嘉氏の手になるものは、 少し唐突な感じで意外な感じを受けさえし驚かされもした、 氏のブログ ひがやすを blog でjQueryを使用したTipsの、 jQueryに依れば当該事も可能成る可くを知り、興味深くもあり、 少しくチュートリアル的感もありjavascriptの勉強にもなる可く当ブログにてご紹介させていただきます。

上記ブログの2008年7月13日の記事 jQueryでリストをリンクに変える方法 が其れに当たり、引用させていただいた上で、 赤字部分を当ブログで追加しています。 上記コードはスコープ内のリスト項目、例えば下記

• http://www.google.co.jp
• http://www.yahoo.co.jp

に対して、リストのテキストをリンク先としてテキストをラップする機能で、 適用したものが下記になり、

• http://www.google.co.jp
• http://www.yahoo.co.jp

ご覧の様に、ブログシステム自体によく実装されている機能がjQuery、 即ちクライアントサイドのみで可能になっています。
難点はjavascriptで動的に生成されたリンクであることによりSEO的効果が緩む処にて、 マイナーブログ運営者には少々辛いかもしれませんが、 他方、リンクジュースを送りたくないリンク先へのアンカータグに nofollow属性を一々記述しなくてもよくなると云うメリットも考えられ、 好ましくないリンクの十把一絡げ表示の一網打尽の省力化にも有効であると考えられます。
また、コードに於ける追加の前者は、 ブログ抔ではすべてのliがリンクに変更されては喜ばしくない場合もある為、 当ブログ2008年7月7日七夕にご紹介の jQueryの書籍2冊 を見ても其の初歩的部分で解説されるエレメントへのアクセスに習って、 特定のリストだけリンクに変換すれば其の際も問題は無いと思われ、 当アーティクルにてもidの付加で適用前、適用後を判別するべく利用しており、 また後者は単純に見た目の色をjQuery適用前に合わせる為のみの追加です。

氏の記事にも言及される様に、此のスクリプトに於いてjQueryで実装されるメソッドは、 イテレータとしてeach()が使用され、 其の際の$(this)の挙動を合わせ学ぶことが出来、また、 要素をエレメントで囲むラッパーとしてwrapInner()が使用されています。