ひがやすを技術ブログ

電通国際情報サービスのプログラマ

jQueryでリストをリンクに変える方法

こんな感じのリストがあったとします。

<ul>
<li>http://www.google.co.jp</li>
<li>http://www.yahoo.co.jp</li>
</ul>

もちろん、リストをクリックしてもなにもおきません。これをjQueryを使って、リンクに変えてみましょう。
each()とwrapInner()を組み合わせます。

<html>
<head>
<title>sample08</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $("li").each(function(i){
        $(this).wrapInner(
            "<a href=\"" + $(this).text() + "\"></a>")
    });
});
</script>
</head>
<body>
<ul>
<li>http://www.google.co.jp</li>
<li>http://www.yahoo.co.jp</li>
</ul>
</body>
</html>

実行結果は次のようになります。

<ul>
<li><a href="http://www.google.co.jp">http://www.google.co.jp</a></li>
<li><a href="http://www.yahoo.co.jp">http://www.yahoo.co.jp</a></li>
</ul>

wrapInnerは、対象の要素の中の要素を囲みます。例えば、

$("li").wrapInner("<div></div>");

のようにすると

<ul>
<li><div>http://www.google.co.jp</div></li>
<li><div>http://www.yahoo.co.jp</div></li>
</ul>

のようになります。each()中のfunctionで現在対象となっている要素は、$(this)で取得できます。
each()を使わずに

$("li").wrapInner("<a href=\"" + $(this).text() + "\"></a>"));

を使ってもいけるのではと思った方もいるかもしれません。この場合の$(this).text()は、"http://www.google.co.jp http://www.yahoo.co.jp"を返すので、想定どおりには動きません。
$(this)を使わない場合は、each()なしでも大丈夫です。