JS/jQuery:如何基于img src自动将<a href>标签围绕<img rel="nofollow noreferrer" /> s包装,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>")});

谢谢阅读.Jannis

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属性为src3号线
5号线:wrap在<a>标签周围<img>标签.