Question

我想按高度和宽度对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>

Answer 1

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

在这里，我将高度优先于宽度，然后是宽度。

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

我如何按高度和宽度排序html元素？

1 个答案: