Найти и заменить все элементы внутри div

Question

У меня есть элемент со странными тегами рисунок.

<div id="text"><div class="medium-insert-embeds" contenteditable="false"> 
    <figure> 
     <div class="medium-insert-embed"> 
      <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 75.0019%;"><iframe src="https://www.youtube.com/embed/MYxsDlpMN10?wmode=transparent&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div> 
     </div> 
    </figure> 
    <div class="medium-insert-embeds-overlay"></div> 
</div><p class=""><br></p><p class=""><br></p><div class="medium-insert-embeds" contenteditable="false"> 
    <figure> 
     <div class="medium-insert-embed"> 
      <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 75.0019%;"><iframe src="https://www.youtube.com/embed/MYxsDlpMN10?wmode=transparent&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div> 
     </div> 
    </figure> 
    <div class="medium-insert-embeds-overlay"></div> 
</div><p><br></p></div> 

Я хочу найти все такие элементы и заменить их их содержимым с помощью jquery.

var container = $('#text'); 
var htmlOfFirstFigure = container.find('figure').html(); //get html 
container.find('figure').replaceWith(htmlOfFirstFigure); //replacing element 

Он работает нормально, если только один элемент фигуры находится в html. Но как заменить новые элементы?

Answer 1

replaceWith может быть задана функция аргумента, он будет вызывать эту функцию для каждого элемента в коллекции и заменить его результат:

container.find('figure').replaceWith(function() { 
    return $(this).html(); 
});