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

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

上記ブログの2008年7月13日の記事 jQueryでリストをリンクに変える方法 が其れに当たり、引用させていただいた上で、 赤字部分を当ブログで追加しています。
スポンサーリンク
<script type="text/javascript">
<!--
jQuery(document).ready(function($) {
  $("ul#article080716 li").each(function(i){
    $(this).wrapInner(
      "<a href="" + $(this).text() + "" style="color:#ff490a;"></a>")
  });
});
-->
</script>
上記コードはスコープ内のリスト項目、例えば下記
  • 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()が使用されています。
スポンサーリンク

「リストをリンクに変身させるjQuery」への3件のフィードバック

  1. SAStrutsというWebフレームワークでjQueryを推奨のJavaScriptライブラリとして位置づけているので、最近はjQueryもやってますよ。

  2. 此れは門外漢が頓珍漢な感想を抱き失礼しました。
    SAStrutsの推奨ライブラリであるとは、jQueryの可能性を再確認出来ました。
    ひがさんのブログは頻繁に参照し楽しまさせていただいておりますし、向後jQueryの話題抔も取り扱われるのではと、益々期待が高まります。

  3. 不可避に発生する複製ページへのSEO的配慮

    複製ページは不可避に発生する場合も多く、検索エンジンにペナルティの対象とは見做されないと云うのが大方の見解であると、冒頭に記述されている記事は、Web担当者Forumの2008年6月23日の記事複製コンテンツが本当に問題になるケースにて、其れは下記引用部自分のサイトに多

コメントは受け付けていません。