使用javascript重新排序div

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在這里。

Answer 2

prepend不接受String選擇器。 從文檔 ：

.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確實接受String選擇器：

$("#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
  }
});