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，也需要包装。有时它可能不会。将来可能会有其他不同类别的元素。如何用视频包装类包装视频的所有兄弟姐妹？

  <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>');
});

我怎么能包裹一个元素及其所有未知的兄弟姐妹

1 个答案: