.wrap（）与resize函数一起使用时多次添加选择器

Posted 2021-04-13

当浏览器宽度小于div或高度大于宽度时，我正在使用resize函数将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>

答案

浏览器可以在调整大小操作期间多次触发调整大小事件，有关详细信息，请参阅此question。

我建议检查容器的存在以避免重复：

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