如何在超链接后添加图片

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>

，例如 google 在其中添加具有相同超链接的图像case google 并在图像 src 内 在 http://open.thumbshots.org/image.aspx?url= 因此结果将是

的下面的代码是每个帖子中 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 演示。

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

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

JS Fiddle 演示。

另外，只是为了演示，如果不彻底的话，这实际上并不需要 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。

关于弗洛伊德·平克的评论，我必须承认我错过了将图像也作为链接的需要。以下是一种有点混乱的处理方式，尽管我觉得一定有一种更整洁的方式：

$('.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 演示。

Answer 2

我更喜欢这种方法，但@David也有一个很好的答案。

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