Question

我试图删除并重新添加DOM元素，该元素取决于屏幕尺寸，但无法正常工作。

这是我尝试过的：

HTML：

<div id="hideit">Some text</div>

JS：

require(['jquery'], function(){
    jQuery( document ).ready(function(){
        jQuery(window).resize(function(){
            var childhtml = jQuery("#hideit").detach();
            if(window.innerWidth < 990) {
            jQuery("#hideit").remove();
            }
            if(window.innerWidth > 990){
            jQuery("#hideit").append(childhtml);
            }
        });
    });
});

Answer 1

Working fiddle 。

您必须先克隆它，然后在用户调整大小时可以删除/添加它：

jQuery(document).ready(function() {
  var hideit = jQuery("#hideit").clone(true);

  jQuery(window).resize(function() {
    var innerWidth = window.innerWidth;

    if (innerWidth < 990) {
      jQuery("#hideit").detach();
    } else if (innerWidth > 990) {
      if (!jQuery("#hideit").length) {
        jQuery("body").append(hideit);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hideit">Some text</div>

Answer 2

您可以尝试这样的事情

jQuery( document ).ready(function(){
  var el = jQuery("#hideit").detach();
  jQuery(window).resize(function(){
    if(window.innerWidth < 990) {
      jQuery("#hideit").remove();
    }
    if(window.innerWidth > 990){
      el.appendTo('body'); // or other place
    }
  });
});

使用jQuery调整事件大小并在DOM中重新添加元素

2 个答案: