javascript - .wrap() 与调整大小函数一起使用时多次添加选择器

Question

当浏览器宽度小于 801px 或高度大于宽度时，我使用调整大小函数将 div 用容器包装。我的问题是，当其中任何一个变为 true 时，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

浏览器可以在调整大小操作期间多次触发调整大小事件，请参阅此 question了解更多详情。

我建议检查容器是否存在以避免重复:

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