如何通过jQuery在调整大小时只插入一次元素

Question

我有以下操作：

var mtarget = $('.headshots');
var mwin = $(window).width();
var singlephoto = '<div class="officers-group-shot"><img src="my-image.jpg" alt=""></div>';
if (mtarget.length) {
    $(window).on("resize", function () {
        if (mwin < 800) {
            $('.headshots').addClass('d-none');
            $(singlephoto).insertBefore('.headshots:first');
        } else {
            $('.headshots').removeClass('d-none');
        }
    }).resize();

它按预期工作，只是在拖动屏幕时不断处理insertBefore代码。

如何在加载或拖动时屏幕小于800px的情况下只插入一次"之前"

谢谢！

Answer 1

检查是否已经添加了div，只有在找不到的情况下才添加。

if (mwin < 800) {
  var $addedDiv = $(".officers-group-shot");
  if ($addedDiv.length == 0) {
    $('.headshots').addClass('d-none');
    $(singlephoto).insertBefore('.headshots:first');
  }
}