这是用 jQuery 重新排序 HTML 的有效方法吗？答案

【问题标题】：Is this an efficient way of reordering HTML with jQuery?这是用 jQuery 重新排序 HTML 的有效方法吗？
【发布时间】：2015-05-28 16:15:51
【问题描述】：

下面的脚本会检查浏览器的宽度，并在检测到 dom 元素上的 css 元素 text-align:center 时移动一些 div。这个 css 元素依赖于 980px 的媒体查询。代码可以顺利运行，但我觉得也许有一种更简单的方法可以做到这一点。我知道这可能可以通过浮动在 CSS 中完成，但感觉这将是一种更清洁的方式。任何有关如何使此代码更高效的建议将不胜感激。

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

【问题讨论】：

CSS 浮动或媒体查询将比您编写的任何 Javascript 更高效。
codereview.stackexchange.com
@RGraham：但是 css 无法重新组织 dom。看两个条件。一个是insertAfter，另一个是insertBefore。 css 不能像那样调整树。
@MarcB 当然。但是只要有一点创意，CSS 肯定可以让它看起来 就像 DOM 已经被重新组织过一样。而且它的性能会更高。此外，OP 声明 this probably could have been accomplished in CSS through floats...
CSS flexbox 可以比浮动更好地重组块。可能是你需要的。

标签： javascript jquery html performance insertafter

【解决方案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;
}

对你有帮助吗？

【讨论】：

【解决方案2】：

您是否正在寻找类似this 的内容？当您更改页面的宽度时，红色和绿色列交换边。

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;
  }
}

【讨论】：