如何按高度和宽度对html元素进行排序？答案

【问题标题】：How can i sort html element by height and width?如何按高度和宽度对html元素进行排序？
【发布时间】：2017-01-26 09:50:02
【问题描述】：

我想按高度和宽度对我的html 元素进行排序，这样高度和宽度值最高的元素就会排到顶部。我已经可以按此 jsfiddle http://jsfiddle.net/hF9WL/ 中的高度对元素进行排序。但我无法使用

对 div 元素进行排序

“宽度较小但高度与中号相同”

代码如下：

$('div.sortable').sort(function(a, b) {
  return $(b).height() - $(a).height();
}).appendTo('#container');

.small {
  height: 100px;
  background-color: blue;
  width: 200px;
}
.medium {
  height: 250px;
  background-color: red;
  width: 400px;
}
.large {
  height: 200px;
  background-color: green;
  width: 300px;
}
.lesser {
  height: 250px;
  background-color: purple;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="container">
  <div class="sortable small">Small</div>
  <div class="sortable lesser">Less width but the same height as medium</div>
  <div class="sortable medium">Medium</div>
  <div class="sortable large">Large</div>

</div>

【问题讨论】：

height 或 width .. 哪个优先级更高？

标签： jquery css height width jquery-ui-sortable

【解决方案1】：

$('div.sortable').sort( function(a,b) {
   return $(b).height() - $(a).height() || $(b).width() - $(a).width();;
}).appendTo('#container');

这里我优先考虑高度，然后是宽度。

访问http://jsfiddle.net/hF9WL/4/ 了解我创建的完整解决方案

【讨论】：