jquery - 如何在超链接后添加图片

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() 运行网站 URL 可能是明智之举:

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