Question

我正在尝试使用JavaScript更改div的顺序。这是我怎么做的？

<div id="pageWrapper">
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
    <div id="four">4</div>
</div>

$(document).ready(function(){ 
        $('#pageWrapper').prepend('#three');
        $('#pageWrapper').prepend('#four');

});

Answer 1

如果需要，你可以将它与window.resize()事件一起使用（你也可以使用else语句将其设置回默认值）

$(document).ready(function(){
    $(window).resize(function(){    
     if ($(window).width() < 980) {
        $('#three').insertBefore('#one');
        $('#four').insertBefore('#two');
     } else {
      // Set back to default, or whatever you like.
     }
    });
});

<强> jsFiddle here.

Answer 2

prepend不接受字符串选择器。来自doc：

.prepend( content [,content] )
  ────────────────────────────────────────────────── ──────────────
  内容
  输入：htmlString或Element或Array或jQuery

要在匹配元素集中的每个元素的开头插入的DOM元素，元素数组，HTML字符串或jQuery对象。

您必须改为传递jQuery对象：

http://jsfiddle.net/DerekL/eHq2a/

$('#pageWrapper').prepend($('#three')); $('#pageWrapper').prepend($('#four')); //or just $('#pageWrapper').prepend($('#four'), $('#three'));

然而，有趣的是.prependTo接受了一个字符串选择器：

$("#three").prependTo("#pageWrapper");

Answer 3

请使用一些响应式设计。在您的情况下，在CSS中使用@media查询。比在脚本中做的更好。

@media screen and (max-width:980px) {
/* your style */
}

如果您仍然喜欢使用脚本，那么您可以订阅resize事件处理程序，如

$( window ).resize(function() {
  if($(window).width()<requiredMinimum)
  {
    //dowhatever
  }
  else
  {
    //revertback
  }
});

使用javascript重新排序div

3 个答案: