どのように要素をラップすることができますか？その要素はすべて不明です。

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を追加するjQuery.addBack()、その後、要素の兄弟を選択する機能jQuery.siblings()を使用することができます

<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

。次に、wrap()の代わりにjQuery.wrapAll()を使用する必要があります。そのため、ラッパーはそれぞれのラッパーを別々に作成するのではなく、すべての要素を囲みます。

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