JS/jQuery:img src に基づいて動的である href を使用して、<img /> の周囲に <a href> タグを自動的にラップするにはどうすればよいですか?

Question

注意喚起：私は Javascript にはまったく慣れておらず、これまで jQuery に基づいた非常に基本的なスクリプトしか書いていません。私は勉強が早いほうですが…。

私が求めているのは次の方法です。

1) タグを識別する

2) imgタグを読み取る

3) タグを <a href> img の src に基づいたダイナミック リンクを持つタグ。

例：

<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="image1">

になるはずです

<a href="../../img_L/Culture/C_01/c_01_abb_005.jpg"><img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="C 01 Abb 005"></a>

各画像の src を読み取って変数に書き込み、次にその変数を読み取って /img_T/ を /img_L/ に置き換えて、それを新しい変数に書き込み、各 href に簡単に追加できると考えています。

これは私がどこまで到達したかを示していますが、これはまったく機能しません:

/* in the comments 'xxx' represents a different unique image string */
/* This should get the <img src="../img_T/xxx" /> string as text and store it. */
var $imgSrc        =    $(".displaywrapper img").attr("src");

/* This part should use the above sourced <img src="../img_T/xxx" string and replace ../img_T/ of the src with ../img_L/ and store it in var = imgLink. */
var imgLink        =    $imgSrc.text().replace("img_T","img_L");

/* This part should then wrap the <img src="../img_T/xxx" /> so it becomes <a href="..img_L/xxx"><img src="../img_T/xxx" /></a> */
$(".displaywrapper img").each(function(){.wrap("<a href="imgLink"></a>")});

読んでくれてありがとう。ジャニス

Answer 1

これでうまくいくはずだと思います:

$(document).ready(function() {
    $(".displayWrapper img").each(function() {
        var src = $(this).attr('src').replace('img_T','img_L');
        var a = $('<a/>').attr('href', src);
        $(this).wrap(a);
    });
});

ライン1：書類を待ちます to be ready 何かをする前に..
2行目：jQuery を使用して各画像をループします。 each 関数。
3行目:現在の画像の src を取得します。 attr そして交換してください img_T と img_L
4行目: Dynamically create 新しい <a> タグを作成し、その href 属性を src 3行目
5行目: wrap の <a> 周囲のタグ <img>タグ。

Answer 2

画像をクリックできるようにするだけの場合は、次のようにします。

$(".displayWrapper img").click(function(){
  document.location.href = this.src.replace("img_T", "img_L");
});