如何将元素包装在弹出窗口中？

Question

我正在尝试将除一个元素之外的元素包装在弹出窗口中。我所做的一切都不起作用。例如。

在此div（图或.leaflet-popup-content div）中，我想包装所有文本、标题图片，实际上除了图或iframe 之外的所有内容，以便轻松添加一些填充，而不必 select 所有元素一个一个地填充。

 <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>

如何将元素包装在弹出窗口中？

How to wrap an element in a popup?

javascript

jquery

popup