Как я могу переместить запись блога H3 в начало изображения с помощью JQuery?

Question

Я работаю над редактированием шаблона в Blogger.Гаджет «Блог» автоматически помещает заголовок перед изображением блога в DOM.Проблема в том, что я пытаюсь создать наведенное на изображение изображение, и я хочу, чтобы текст сверху изображения ссылался на сообщение в блоге.Наведение только ссылки на изображение, а не сообщение в блоге.Я пытаюсь манипулировать DOM с помощью некоторого JQuery и почти там, но столкнулся с небольшой проблемой.Я попытался зациклить на каждом заголовке и вставить после изображения.Это работает, но отображает каждый заголовок.Мне нужно только отобразить заголовок, который соответствует этому сообщению.Вот что у меня есть.

$('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, который его создает, и я хочу, чтобы h3 под img, такЯ могу создать эффект наведения, который будет ссылаться на сообщение в блоге.Приведенный выше код jQuery работает, но он добавляет все заголовки к каждой картинке.Они перекрывают друг друга.

Я только хочу показать, что заголовок принадлежит этому изображению.

Answer 1

Вам нужно добавить переменную для хранения этого изображения.

Попробуйте это

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