Question

是否可以按内联宽度属性（最高的第一个）对div进行排序？

例如我的div：

  <div style="width: 30.8px"></div>
  <div style="width: 10.45px"></div>
  <div style="width: 20px"></div>

我正在寻找这样的东西，但它只适用于div内容;（

$('.list li').sort(sortDescending).appendTo('.list');

function sortDescending(a, b) {
    var date1 = $(a).find("div").text()
    var date2 = $(b).find("div").text();

    return $(b).find("div").text() - $(a).find("div").text();
};

Answer 1

按元素宽度排序会更容易。这有两个好处;首先，您不必剖析字符串以获取宽度值，其次（更重要的是）您可以在外部样式表中设置width属性，逻辑仍然有效。试试这个：

＆＃13;

$('div').sort(function(a, b) {
  return $(a).width() > $(b).width() ? -1 : $(a).width() < $(b).width() ? 1 : 0;
}).appendTo('.list');

＆＃13;

div div {
  border: 1px solid #C00;
  margin: 5px;
  height: 5px;
}
#foo {
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="width: 30.8px"></div>
  <div style="width: 10.45px"></div>
  <div style="width: 20px"></div>
  <div id="foo"></div>
</div>

＆＃13;

请注意，您的选择器的目标是li元素，但您的示例使用的是div元素。我只是假设在写这个问题时这只是一种疏忽。

按内联“样式”属性对Div进行排序

1 个答案: