JS/jQuery: Как я могу автоматически обернуть <a href> tags around <img />s with the href being dynamic based on the img src?

Question

Heads up: I am quite new to Javascript and have so far only written very basic scripts based on jQuery. I am a quick study though..

What I am after is a way to:

1) identify tags

2) read the img tags

3) wrap the tag with an <a href> tag with a dynamic link based on the src of the img.

Example:

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

should become

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

I am thinking that reading the src of each image and writing it to a variable, then reading that variable and replacing the /img_T/ with /img_L/ and then writing that to a new variable which can then be simply added to each href.

This is how far I have gotten, but this does not work at all:

/* 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>")}); 

Thanks for reading. Jannis

Answer 1

I think this should do the trick:

$(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); 
    }); 
}); 

Line 1: Wait for the document to be ready перед тем, как что-либо сделать.
Строка 2: Прокрутите каждое изображение, используя функцию jQuery's 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"); 
});