Question

这是每个帖子上的HTML

<div class="post-body">
<a href="http://www.google.com">google</a>
<a href="http://www.youtube.com">youtube</a>
<a href="http://www.facebook.com">facebook</a>
</div>

对于例如<a href="http://www.google.com">google</a>的每个链接，在这种情况下<a href="http://www.google.com">google</a>和图像src中添加具有相同超链接的图像在http://open.thumbshots.org/image.aspx?url=之后添加超链接，结果将为<img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" />

下面的代码是每个帖子中html的结果。

 <div class="post-body">
    <a href="http://www.google.com">google</a>
    <a href="http://www.google.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" /></a>


    <a href="http://www.youtube.com">youtube</a>
    <a href="http://www.youtube.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.youtube.com" width="120px" /></a>


    <a href="http://www.facebook.com">facebook</a>
    <a href="http://www.facebook.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.facebook.com" width="120px" /></a>
    </div>

Answer 1

这相对简单：

$('.post-body a').each(
    function(){
        $('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+ this.href).insertAfter($(this));
    });

JS Fiddle demo

虽然通过encodeURIComponent()运行网站网址可能是明智的，但为了安全起见：

$('.post-body a').each(
    function(){
        $('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)).insertAfter($(this));
    });

JS Fiddle demo

另外，仅仅为了演示，如果不是彻底性，这并不需要jQuery;使用纯JavaScript可以实现同样的效果（尽管采用相当简洁的方式）：

var container = document.getElementsByClassName('post-body')[0];
var links = container.getElementsByTagName('a');
var imgSrc = 'http://open.thumbshots.org/image.aspx?url=';

for (i = 0; i < links.length; i++) {
    var img = document.createElement('img');
    var linkURL = encodeURIComponent(links[i].href);
    img.src = imgSrc + linkURL;
    container.insertBefore(img,links[i].nextSibling);
}

JS Fiddle demo

关于Floyd Pink的评论，我必须承认我错过了将图像作为链接的需要。以下是一种有点混乱的处理方式，虽然我觉得必须有一个更加整洁的方式：

$('.post-body a').each(

function() {
    $('<img />').attr('src', 'http://open.thumbshots.org/image.aspx?url=' + encodeURIComponent(this.href)).insertAfter($(this)).parent().find('img:last').wrap('<a></a>').closest('a').attr('href',this.href);
});

JS Fiddle demo

Answer 2

我倾向于更喜欢this approach，但@David也有一个很好的答案。

$('a').each(function(){
    $(this).clone()
     .empty()
     .append(
        $('<img>',{
          width:120,
          src:'http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)
        })
     )
     .insertAfter(this);
});

如何在超链接后添加图像

2 个答案: