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

Question

我想按高度和宽度对 html 元素进行排序，以便高度和宽度值最高的元素位于顶部。我已经可以按高度对元素进行排序，这是 jsfiddle http://jsfiddle.net/hF9WL/ 中的特色。但是我无法使用

对 div 元素进行排序

"Less width but the same height as medium"

代码如下：

$('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>

Answer 1

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

这里我给Height优先，然后是Width。

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

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

How can i sort html element by height and width?

css

jquery

height

width

jquery-ui-sortable