用 href = img src 将 <a> 标签包裹在 <img /> 周围？答案

【问题标题】：Wrap <a> tags around <img /> with href = img src?用 href = img src 将 <a> 标签包裹在 <img /> 周围？
【发布时间】：2010-10-31 23:02:50
【问题描述】：

尝试在图像周围包裹标签，addClass 并输入 img 的 src 作为标签的 href：

 $(document).ready(function() {
$(".new img").each(function() {
    var src = $(this).attr('src').addClass('image');
    var a = $('<a/>').attr('href', src);
    $(this).wrap(a);
});
});

我的 HTML：

<img class="new" src="pic0.png" title="Image_Title"/>

似乎无法让它工作。任何建议都会有所帮助！

【问题讨论】：

标签： jquery class anchor image

【解决方案1】：

两件事。首先，你有你的选择器向后 - 它应该是img.new。其次，attr 返回一个字符串，而不是 jQuery，所以你不能链接它。执行以下操作，它应该可以工作：

$(document).ready(function() {
    $("img.new").each(function() {
        var $this = $(this);
        var src = $this.attr('src');
        $this.addClass('image');
        var a = $('<a/>').attr('href', src);
        $this.wrap(a);
    });
});

【讨论】：

如果我使用 .click(function() 执行此操作，我想我应该以某种方式添加展开？

【解决方案2】：

你的选择器只需要一个调整，这个：

$(".new img")

应该是：

$("img.new")

new 类在<img> 本身，<img> 不是class="new" 元素的后代，这是您当前选择器正在寻找的元素。还有.attr('src')得到一个字符串，所以你需要在调用它之前添加类，总体如下：

$(function() {
  $("img.new").each(function() {
    var src = $(this).addClass('image').attr('src');
    var a = $('<a/>').attr('href', src);
    $(this).wrap(a);
  });
});

You can test it here，或者更简单/更快的版本here：

$(function() {
  $("img.new").each(function() {
    var a = $('<a/>').attr('href', this.src);
    $(this).addClass('image').wrap(a);
  });
});

【讨论】：