jQuery移动元素调整大小

时间:2016-03-20 02:16:30

标签: javascript jquery html css appendto

我很难发现这个jQuery代码的问题。我试图将一个div中的几个元素移动到另一个div中。取决于屏幕的宽度。该代码适用于页面加载,但不适用于我调整大小。

var domWidth = $(window).width();

//Move around page elements
function moveElements() {
    var pageTitle = $('.page-title'),
        actionAlert = $('.action-alert'),
        banner = $("#banner>.container"),
        header = $("header>.container"),
        mainContent = $(".main-content");

    if (domWidth < 1024) {
        pageTitle.prependTo(mainContent);
        actionAlert.appendTo(header);
    } else {
        pageTitle.appendTo(banner);
        actionAlert.prependTo(banner);
    } 
}

$(document).ready(function() {
    moveElements();   
    $(window).resize(function() {
        moveElements();
    });

});

2 个答案:

答案 0 :(得分:0)

您可以从div更改侦听器触发事件​​。

$(window).trigger('resize')

检查this以获得更多想法

答案 1 :(得分:0)

 //Move around page elements
function moveElements() {
  var domWidth = $(window).width();
  var pageTitle = $('.page-title'),
    actionAlert = $('.action-alert'),
    banner = $("#banner >.container"),
    header = $("#header >.container"),
    mainContent = $(".main-content");
  if (domWidth < 1024) {
    pageTitle.prependTo(mainContent);
    actionAlert.appendTo(header);
  } else {
    pageTitle.appendTo(banner);
    actionAlert.prependTo(banner);
  } 
}

$(document).ready(function() {
moveElements();   
$(window).resize(function() {
    moveElements();
});

});
  

对您的代码进行了一些严肃的编辑。   
代码中的错误

  1. 主要是你把var domWidth =$(window).width();放在功能之外。 //它应该在函数中,因为每次函数工作时都需要找到宽度。
  2. 您错过了header = $("header>.container")
  3. 中的#
      

    为了检查我做了一个工作演示   https://jsfiddle.net/8m0d1462/   (为了检查,将宽度减小到400)