javascript - .wrap() 与 resize 函数一起使用时会多次添加选择器

Question

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

当浏览器宽度小于 801 像素时，我得到了这个。

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