jQueryで画像に、リンクを追加したい（リンク先は、その画像名から取得）

ページを読み込んだ時点で、
画像にリンクを追加したいと思っています。

ページを読み込んだ時点でリンクを追加する方法を教えていただきたく
質問させていただきます。
よろしくお願いいたします。
（画像をクリックしたらリンクを追加するという事はできたので
そちらのコード記載させていただきます）

html
1<div class="contents">
2
3<img src="image_01.jpg> // <a href="image_01.html"></a>で囲みたい
4<img src="image_02.jpg>// <a href="image_02.html"></a>で囲みたい
5<img src="image_03.jpg>// <a href="image_03.html"></a>で囲みたい
6
7</div>
8

jQuery
1$(function(){
2　$('contents img').click(function(e){
3　　e.preventDefault();
4　　
5　　var url=$(this).attr('src').subsur(0,8);
6　　location.href = url + '.html';
7　　return false;
8});
9

m.ts10806

2018/06/06 03:56

このままでは丸投げとなるので（ https://teratail.com/help/avoid-asking ）調べてみたこと、やってみたこと（そのソースコード）を具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2

alpaca540

2018/06/06 04:03

すみません！質問内容を記載途中に間違ってアップしてしまいました。自分で調べた範囲などを記載して改めて質問をさせていただきました。今後気をつけます。

行動規範の内容に同意します

回答2件

javascript
1$(function(){
2  $('.contents img').wrap($('<a>').attr('href',$(this).find('img').attr('src').replace(/..+$/,'.htm')));
3});

投稿2018/06/06 04:10

yambejp

総合スコア114814

alpaca540

2018/06/06 06:03

ご回答ありがとうございます。実現したかった内容です！ Kosuke_Shibuya様からの回答をもとに再度コードを考えていた為、ご返信のタイミングが遅くなってしまいました。申し訳ありません。以前にもyambejp様に回答をいただきました。本当にありがとうございます。

行動規範の内容に同意します

ベストアンサー

javascript
1$(function(){
2    $("img").each(function(){
3        var src = $(this).prop('src');
4        $(this).wrap($('<a>').prop('href', src));
5    });
6});