Question

我正在使用.wrap()在某个<div>内的每个图片周围创建一个链接，我需要将该链接的href设置为等于该图片的src值。我想出了如何进行选择和替换，但我无法弄清楚如何提取src值。

这是html结构：

<div class="divclass">
    <img src="path1" />
    <img src="path2" />
    <img src="path3" />
</div>

并且期望的结果是

<div class="divclass">
    <a class="linkclass" href="path1">
        <img src="path1" />
    </a>
    <a class="linkclass" href="path2">
        <img src="path2" />
    </a>
    <a class="linkclass" href="path3">
        <img src="path3" />
    </a>
</div>

简单的部分是创建图像周围的链接，我使用.wrap()这样做。接下来我需要设置href值，我可以使用.attr，但我不知道如何在同一个调用中提取src的值。这就是我到目前为止所做的：

$('.divclass img').wrap("<a class=\"linkclass\" href="" />");
$('a.linkclass').attr("href", $(this).find('img').attr('src'));

但这不起作用。我怀疑我使用$(this)错误，但无法弄清楚如何/为什么。

任何帮助将不胜感激！

Answer 1

试试这个并仔细阅读。在这几行中有一些值得了解的事情。它很像CephalidOne的解决方案，但可能更容易理解。

$('div.divclass img').each(function(){
    var $this = $(this);
    $this.wrap('<a href="' + $this.attr('src') + '"></a>');
});

看到它的工作：http://jsfiddle.net/AAdWH/

Answer 2

$('.divclass img').wrap(function() {
  return '<a class="linkclass" href="' + $(this).attr('src') + '" />';
});

Answer 3

而不是：

$(this).find('img')

使用：

$(this).children('img')

并且您的包装格式不正确。

所以最后你的代码是：

$('.divclass img').wrap("<a class='linkclass' />");
$('a.linkclass').attr("href", $(this).children('img').attr('src'));

或完全更改您的代码：

示例(the fiddle)：

$('.divclass').children('img')
    .each(function(){
        var $this = $(this)
        $this.wrap("<a class='linkclass'/>")
        $this.parent('.linkclass').attr("href", $this.attr('src')); 
     });

使用jQuery从子图像src设置链接href

3 个答案: