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

Question

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

在这个div（图或.leaflet-popup-content div）中，我想包装所有文本，标题图像，实际上是除图形或iframe以外的所有内容，以便轻松添加一些填充，而不必选择所有元素一个。

 <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调用以获取子元素并过滤出数字。

之前：

之后：

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

.tag {
  width: 400px;
  margin-left: 1.5em;
  display: inline-block;
  position: relative;
  bottom: 1em;
  padding-top: 4.95216px;
  padding-bottom: 4.95216px;
  background-color: #0077c0;
  color: #fff;
  border: 1px solid #0077c0;
  border-radius: 33px;
}

.tagline {
  display: block;
  font-size: 13px;
  font-family: webfont-Frutiger, sans-serif;
  word-break: break-word;
  margin-bottom: 0;
  padding-right: 8.516px;
  padding-left: 8.516px;
}