0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【備忘録】jQueryでURLに特定の文字を足す

Posted at

したい事

URLに特定の文字を足す

page-link01.htmlの末尾に、「#content」を追加したい

▼対象のソース(例)

<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を使用

①対象を絞込む(.page-link要素内のa)

②eachに関数を渡す

③関数内のjQuery(this)で、対象オブジェクトを取得し、変数objに代入

④変数objに代入した対象オブジェクトのリンクURLを取得し、変数linkに代入

⑤attrでリンクURLを「変数linkで取得したリンクURLに#contentをプラスした文字列」に置き換える

<script>
jQuery(function(){
    jQuery(".page-link a").each(function() {
        var obj = jQuery(this);
        var link = obj.attr("href");
        obj.attr("href",link+"#content")
    });
});
</script>

実行例

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

分からなかった事

ネットの記事を参考にしましたが下記が特に分からなかったので、別途調べて記事を書きます。

  1. eachに関数を渡すとは?
  2. jQuery(this)とは?
  3. attr()とは?
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?