jQueryでURLに特定の文字（#contentなどの文字）を足す

リンク要素<a href="◯◯◯.html">のURL「◯◯◯.html」の後ろに#contentを追加したいとします。
この場合は、要素に属性を設定するjQueryのattrを使用します。

HTML

[code language=”html”]<ul class="page-link">
<li><a href="page-link01.html">リンク01</a></li>
<li><a href="page-link02.html">リンク02</a></li>
<li><a href="page-link03.html">リンク03</a></li>
</ul>[/code]

jQuery

[code language=”jQuery”]jQuery(function(){
jQuery(“.page-link a”).each(function() {
var obj = jQuery(this);
var link = obj.attr(“href”);
obj.attr(“href”,link+”#content”)
});
});[/code]

1. 対象を絞込む(.page-link要素内のa)
2. eachに関数を渡す
3. 関数内でjQuery(this)で対象オブジェクトを取得し、変数objに代入
4. 変数objに代入した対象オブジェクトのリンクURLを取得し、変数linkに代入
5. attrでリンクURLを「変数linkで取得したリンクURLに#contentをプラスした文字列」に置き換える

実行結果

[code language=”html”]<ul class="page-link">
<li><a href="page-link01.html#content">リンク01</a></li>
<li><a href="page-link02.html#content">リンク02</a></li>
<li><a href="page-link03.html#content">リンク03</a></li>
</ul>[/code]

失敗例

ちなみにうまくいかなかった書き方はこちら。
.page-link要素内のaが全て同じリンクURLになってしまいました。
eachしてないからですね。ご注意ください。
[code language=”jQuery”]jQuery(function(){
var link = jQuery(“.page-link a”).attr(“href”);
link = link + “#content”;
jQuery(“.page-link a”).attr(“href”,link);
});[/code]