Как заменить тег с элементом Dynami c, используя jquery

Question

Я использую Jquery 3.4.1. Я пытаюсь заменить тег img в моем html на динамически созданный элемент div. Но он всегда отображается как простой текст вместо html.

HTML:

<p class="post-content">
    <img src="..." />
</p>

Сценарий:

$.each($('.post-content img'), function () {
    const imgSrc = this.src;
    this.closest('p').replaceWith(`<div class="post-image"><div class="post-image-cover" style="background-image: url(${imgSrc})"></div></div>`)
});

Токовый выход:

Ожидаемый выход:

Над текстом html необходимо отобразить как HTML элемент.

Пожалуйста, помогите, если я ошибаюсь?

Answer 1

Вам нужно использовать $(this). вместо this. - для вызова jQuery функциональности, а не нативной JS, которая работает по-другому.

$.each($('.post-content img'), function() {
  const imgSrc = this.src;
  $(this).closest('p').replaceWith(`<div class="post-image"><div class="post-image-cover" style="background-image: url(${imgSrc})">Test replacement</div></div>`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="post-content">
  <img src="..." />
</p>