如何使用JQuery将博客文章H3移到图像的前面？

Question

我正在编辑Blogger上的模板。 Blog小工具会自动将标题放在DOM中博客图像之前。问题是，我试图在图像上创建一个悬停，我希望图像顶部的文本链接到博客文章。悬停仅链接到图像，而不链接到博客文章。我试图用一些JQuery来操作DOM，但是几乎遇到了一个小问题。我试图遍历每个标题并插入图片。它可以工作，但是显示每个标题。我只需要显示与该帖子相对应的标题。这就是我所拥有的。

$('h3.post-title').each(function(i) {
    console.log(i);
    $(this).insertAfter('.post-body a img');
});

如果需要，这里是实时链接。 Test Site

更新HTML

<h3 class="post-title"> 
  <a href="blog-post"> Blog Name </a> 
<h3>
<div class=post-body> 
   <a href="blog picture"> 
     <img src="#"> 
   </a> 
</div>

我无法手动更改HTML，因为它是创建它的Blogger小工具，并且我希望在img下方添加h3，因此我可以创建将链接到博客文章的悬停效果。上面的jQuery代码确实有效，但是它为每张图片添加了所有标题。它们彼此重叠。

我只想显示标题属于该图像。

Answer 1

您需要添加一个变量来保存此图像。

尝试一下

$('.post').each(function(i) {
    var thisimg = $('.post-body a img', this);
    $('h3.post-title', this).insertAfter(thisimg);
});