Search code examples
jqueryblogger

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

I am working on editing a template on Blogger. The Blog gadget automatically puts the heading first before the blog image in the DOM. The problem is, I am trying to create a hover over the image and I want the text on top of the image to link to the blog post. The hover only links to the image and not the blog post. Im attempting to manipulate the DOM with some JQuery and almost there but I ran into a small issue. I have tried to loop over each heading and insertAfter the image. It works but it displays every single heading. I only need to display the heading that corresponds with that post. Here is what I have.

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

Here is a live link, if needed. Test Site

Update 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>

I can not manually change the HTML because it is a Blogger gadget that creates it and I want the h3 underneath the img so I can create a hover effect that will link to the blog post. The above jQuery code does work but it add all the titles to each picture. They overlap each other.See screenshot

I only want to show the title belongs to that image.

Solution

  • You need to add a variable to hold this image.

    Try this

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