這是用jQuery重新排序HTML的有效方法嗎？

Question

下面的腳本檢查瀏覽器的寬度，並在檢測到dom元素上的css元素text-align:center時移動一些div。 此css元素取決於980px的媒體查詢。 該代碼工作順利，但我覺得也許有一種更簡單的方法可以做到這一點。 我知道這可能已經可以通過CSS在float中完成，但是感覺這樣做會更清潔。 任何有關如何使此代碼更有效的建議將不勝感激。

$(document).ready(function(){
  function moveDiv(){
    var $window = $(window);
    var windowsize = $window.width();

    if (windowsize < 980) {
      if ($(".interiortitle h1").css("text-align") == "center"){
        $( ".interiorpage .et_pb_column_1_4").insertAfter(".interiorpage .et_pb_column_3_4");
      }
    }
    else if (windowsize > 980) {
      $( ".interiorpage .et_pb_column_1_4").insertBefore(".interiorpage .et_pb_column_3_4");
    }
   }
   moveDiv();
   $(window).resize(moveDiv);
});

Answer 1

您可以嘗試一下：

檢查窗口大小是否已更改，然后為div應用新的類：

var changeposdiv= $('.changeposdiv');

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

if (windowsize > 980) {
    changeposdiv.addClass('more980');
}

您的HTML示例

<div class="interiordiv">
    ABC
</div>
<div class="changeposdiv">
    Change it
</div>

CSS將在用戶屏幕中移動元素

.changeposdiv, .interiordiv {
    float: left
}

.more980 {
    float: right;
}

有幫助嗎？

Answer 2

您是否在尋找像這樣？ 當您更改頁面的寬度時，紅色和綠色列會互換邊。

HTML

<html>
<body>
  <div class="interiorpage">
    <div class="et_pb_column_1_4"></div>
    <div class="et_pb_column_3_4"></div>
  </div>
</body>
</html>

CSS

.interiorpage{
  height: 200px;
  border: 1px solid black;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}
div[class^=et_pb_column_]{
  width: 50%;
  height:100%;
}
.et_pb_column_1_4{
 background: #fcc;
 order: 2;
 -webkit-order: 2;
}
.et_pb_column_3_4{
 background: #cfc;
 order: 1;
 -webkit-order: 1;
}

@media all and (max-width: 500px) {
  .et_pb_column_1_4{
   order: 1;
   -webkit-order: 1;
  }
  .et_pb_column_3_4{
    order: 2;
   -webkit-order: 2;
  }
}

這是用jQuery重新排序HTML的有效方法嗎？

問題描述

2 個解決方案

解決方案1
1 2015-05-28 16:42:55

解決方案2
0 2015-05-28 16:44:27

這是用jQuery重新排序HTML的有效方法嗎？

問題描述

2 個解決方案

解決方案1 1 2015-05-28 16:42:55

解決方案2 0 2015-05-28 16:44:27

解決方案1
1 2015-05-28 16:42:55

解決方案2
0 2015-05-28 16:44:27