jquery - 如何按高度和宽度对 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/对于我创建的完整解决方案