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

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

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>

jQuery

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

実行結果

<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>

失敗例

ちなみにうまくいかなかった書き方はこちら。
.page-link要素内のaが全て同じリンクURLになってしまいました。
eachしてないからですね。ご注意ください。

jQuery(function(){
	var link = jQuery(".page-link a").attr("href");
	link = link + "#content";
	jQuery(".page-link a").attr("href",link);
});

2 件のコメント

  • 参考にさせていただきました。
    同じようにタグ内の”value”のurlの最後に”?cat=1″を追加したくて悩んでいました。
    WordPressのアーカイブウィジェットをカテゴリーで限定する方法を模索中に、
    表示はfunctions.php内でフック関数を記述することでなんとかなったのですが、
    肝心の月選択した後、全てのカテゴリーがリストアップされて困っていました。
    貴重な情報をありがとうございました。

  • コメントを残す