Как обернуть элемент во всплывающем окне?

Question

Я пытаюсь обернуть элементы, кроме одного во всплывающем окне.Все, что я делаю, не работает.Например.

В этом div (figure или .leaflet-popup-content div) я хочу обернуть весь текст, изображение заголовка, фактически все, кроме рисунка или фрейма, чтобы легко добавить отступы без необходимости выбиратьвсе элементы один за другим.

 <div class="leaflet-popup-content" style="width: 301px;">
  <figure class="wp-block-embed-youtube wp-block-embed is-type-video is- 
   provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div 
   class="wp- block-embed__wrapper">
   <iframe ...></iframe>
    </div></figure>
    <h2>some title</h2>
    <p>som text.</p>
</div>

Я пробовал много способов, как

 jQuery('.leaflet-popup-content').not('.wp-block-embed-youtube 
 ').wrapAll('<div class="inner"> 
  </div>');

Но абсолютно ничего не происходит.

Answer 1

Я изменил вызовы jQuery, чтобы получить дочерние элементы и отфильтровать фигуру.

До:

После:

jQuery(document).ready(function(){

    jQuery("#doWrap").click(function(){
        jQuery('.leaflet-popup-content').children().filter(":not(figure)").wrapAll('<div class="inner"> </div>');
    
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="leaflet-popup-content" style="width: 301px;">
  <figure class="wp-block-embed-youtube wp-block-embed is-type-video is- 
   provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div 
   class="wp- block-embed__wrapper">
   <iframe></iframe>
    </div></figure>
    <h2>some title</h2>
    <p>som text.</p>
</div>

<button id="doWrap">Wrap</button>