jquery:尝试将图像变成超链接

Question

我已经接近我想要的位置了，只是我不知道如何将 var imgt 转换为超链接图像。我尝试了一些方法，但它不断返回 [object][Object]

$j('#hp-featured-item > div[id^="post-"]').each(function() {
      var id=this.id.match(/post-(\d+)/);
      var imgt = $j("img:eq(0)");

      // I tried this but it didn't work
      // var imgt = $j("<a href='/blog/?p="+id[1]+"'>"+$j("img:eq(0)")+"</a>");

      var pt = $j("p:not(:has(img)):eq(0)");
      var hh = $j("h2:eq(0)");
      $j(this).html('');
      $j(this).append(imgt).append(hh).append(pt);
}); 

///更新代码

$j('#hp-featured-item > div[id^="post-"]').each(function() {
                var id=this.id.match(/^post-([0-9]+)$/);
                var imgt = $j("img:eq(0)");
                $j(imgt).wrap($j('<a>').attr('href', '/'));
                var pt = $j("p:not(:has(img)):eq(0)");
                var hh = $j("h2:eq(0)");
                $j(this).html('');
                $j(this).append(imgt).append(hh).append(pt);
        });

好吧，我把它放在评论中，但我也会根据你的建议把它放在这里......本质上，原始的 html 输出在结构上有很大的不同。有时是这样

<img /> 
<h2> </h2> 
<p> </p>
<p> <img /> </p>
<h2> </h2>
<p> </p>

有时，这只是:

<h2> </h2>
<p><img /></p>
<p> text </p>

等等...

我想拉第一个<img /> ，第一个<h2> ，第一个 <p> (没有包裹在图像周围)并按顺序打印它们:

<img />
<h2>
<p>

而且，其余的都可以消失...这只是一个摘要 View ...

嗯，好吧...我将其添加到底部，它似乎有效:

$j(this).each(function() {
                        var img = $j('img');
                        $j(img).wrap($j('<a>').attr('href', '/'));
                });

Answer 1

您可以使用jQuery.prototype.wrap为此:

$j('#hp-featured-item > div[id^="post-"]').each(function() {
      var id=this.id.match(/post-(\d+)/);
      var imgt = $j("img:eq(0)");

      $(imgt).wrap( 
          $('<a>').attr('href', '/blog/?p=' + id[1])
      );

});

这对我有用:

$('.post').each(function() {
    var img = $('img', this), src = $(img).attr('src')
    $(img).wrap( 
             $('<a>').attr('href', src)
    );
});

http://jsbin.com/iyabu

确保您设置的 href 属性正确。