javascript - .wrap() は、サイズ変更機能で使用すると、セレクターを複数回追加しています

Question

divブラウザーの幅が小さい場合、801pxまたは高さが幅より大きい場合、サイズ変更機能を使用してコンテナーでラップしています。私の問題は、それらのいずれかが真になりdiv、セレクターで8回ラップされることです。私は何を間違っていますか？

これが私のコードです：

$(document).ready(function(){
 function wrapperWidth() {
  var wrapper_width = $('body').width();
   if (wrapper_width < 801 || window.innerHeight > window.innerWidth) {
      $('.video-profile').wrap("<div></div>");
   }
 }
 wrapperWidth();
 $(window).resize(function() {
wrapperWidth();
 });
});

ブラウザの幅が 801px 未満になると、これが表示されます。

<div>
 <div>
  <div>
   <div>
    <div>
     <div>
      <div>
       <div>
        <div class="video-profile"></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Answer 1

ブラウザーは、サイズ変更操作中にサイズ変更イベントを複数回発生させることができます。詳細については、この質問を参照してください。

重複を避けるために、コンテナーの存在を確認することをお勧めします。

if (wrapper_width < 801 || window.innerHeight > window.innerWidth) {
    if (!$('.video-profile').parent().hasClass('vp-container')) {
        $('.video-profile').wrap("<div class="vp-container"></div>");
    }
}