Używam Jquery 3.4.1. Próbuję wymienić znacznik img w moim HTML z dynamicznie utworzonym elementem div. Ale zawsze jest renderowany jako zwykły tekst zamiast HTML.

HTML:

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

Skrypt:

$.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>`)
});

Wyjście prądowe:

enter image description here

Oczekiwany wynik:

Powyżej tekstu HTML musi być renderowany jako element HTML.

Proszę o pomoc, gdzie się mylę?

1
fingers10 22 marzec 2020, 05:43

1 odpowiedź

Najlepsza odpowiedź

Musisz użyć $(this). zamiast this. - Aby wywołać funkcjonalność jquery, a nie rodzimy JS, która działa inaczej.

$.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>
3
Igor 22 marzec 2020, 03:37