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()なしでも大丈夫です。