如何使用 JQuery 将博主 post H3 移动到图像的前面？

Question

我正在编辑 Blogger 上的模板。在 DOM 中，博客小工具会自动将标题放在博客图像之前。问题是，我试图在图像上创建悬停，我希望图像顶部的文本 link 到博客 post。悬停仅 link 到图像而不是博客 post。我试图用一些 JQuery 来操纵 DOM 并且几乎在那里，但我运行变成了一个小问题。我试图遍历每个标题并在图像之后插入。它有效，但它显示每个标题。我只需要显示与 post 对应的标题。这是我的。

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

如果需要，这里有直播link。 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，这样我就可以创建悬停效果 link 到博客post。上面的 jQuery 代码确实有效，但它将所有标题添加到每张图片。它们相互重叠。

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

Answer 1

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

试试这个

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

如何使用 JQuery 将博主 post H3 移动到图像的前面？

How can I move a a blogger post H3 to the front of an image using JQuery?

jquery

blogger