根据窗口宽度添加/删除元素

【问题标题】：Add/Remove elements depending of window width根据窗口宽度添加/删除元素
【发布时间】：2021-12-19 10:53:04
【问题描述】：

我想根据屏幕尺寸添加或删除元素。我正在尝试删除我不想显示的项目并附加我想显示的项目。

这样，元素将被删除，但没有附加任何内容。

使用.hide() 和.show() 时，我得到了预期的结果，但我宁愿将它们从DOM 中删除。

有人知道解决这个问题的方法吗？谢谢

JS：

$(window).on("resize", function () {

  var three = $('#three');
  var four = $('#four');
  var five = $('#five');
  var wrapper = $('.grid-wrapper');

  if($(window).width() < 769) {
    five.detach();
    four.detach();
    wrapper.append(three)
  }
  else if($(window).width() > 2018) {
    three.detach();
    four.detach();
    wrapper.append(five)
  }
  else {
    three.detach();
    five.detach();
    wrapper.append(four)
  }

}).resize();

【问题讨论】：

您应该考虑为此使用 css 媒体查询，而不是 js，以便浏览器原生执行。

标签： jquery append hide show

【解决方案1】：

问题是变量var three = 等在您每次调整大小时都会设置/重置。

一旦你删除了#three，它就不再存在了，所以随后的调用var three = $("#three") 将给出一个空的jquery 集合。

如果您将它们移到事件处理程序之外，那么当您 .remove / .detach 它们时，浏览器会将它们保留在内存中，以便稍后重新添加它们。

缩减示例：

var one = $("#one");  // found as not yet removed
one.remove();

$("#two").remove();

$("button").click(() => {
    var two = $("#two");  // not found as previously removed
    
    $("#wrapper").append(one);  // stored above
    $("#wrapper").append(two);  // nothing to add
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click me</button>
<hr />
<div id="wrapper">
  <div id="one">one</div>
  <div id="two">two</div>
</div>

【讨论】：