jquery - 如何使用 JQuery 将博主帖子 H3 移动到图像的前面？

Question

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

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

如果需要，这是一个实时链接。测试地点

更新 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 代码确实有效，但它为每张图片添加了所有标题。它们相互重叠。

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

标签： jqueryblogger

Answer 1

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

试试这个

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