jquery - 我怎样才能 .wrap 一个元素及其所有未知的 sibling

Question

我正在使用 .wrap 将所有视频嵌入包装在响应式容器中。

  var $iframeVideo = $('iframe[src*="youtube.com/embed"], iframe[src*="player.vimeo"]');
  $iframeVideo.each(function () {
    // Add wrapper to make video responsive
    $(this).wrap('<div class="video-wrapper"></div>');
  });

问题是有时视频可能有一个同级标题 div，它也需要换行。有时可能不会。将来可能会有其他具有不同类别的元素。如何使用视频包装器类包装视频的所有 sibling ？

  <iframe type="text/html"
    src="http://www.youtube.com/embed/{{ youtube_id }}?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay={{ autoplay }}"
    frameborder="0">
  </iframe>
  <div class="sibling"></div>
  <p class="another sibling"></p>

Answer 1

您可以使用函数 jQuery.siblings() 选择一个元素的兄弟元素，然后使用 jQuery.addBack() 将 iframe 添加回选择。然后您需要使用 jQuery.wrapAll() 而不是 wrap() 以便包装器包含所有元素，而不是为每个元素创建单独的包装器。

var $iframeVideo = $('iframe[src*="youtube.com/embed"], iframe[src*="player.vimeo"]');
$iframeVideo.each(function () {
    // Add wrapper to make video responsive
    $(this).siblings().addBack().wrapAll('<div class="video-wrapper"></div>');
});