jquery - 基于 Jquery 中的属性值对 Div 进行排序

Question

我有几个这样的div

<div rel="5">
  Divs content goes here
</div>
<div rel="3">
   Div 3 Here
</div>
<div rel="4">
  Div 4 Here
 </div>
 <div rel="4.5">
   Div 4.5 here
</div>

如何使用 Jquery 对 div 进行排序，以便在 DOM 中物理地首先使用最小 rel 属性对它们进行排序？

例如3, 4, 4.5, 5

Answer 1

看我的 fiddle :http://jsfiddle.net/6hpNz/8/

您可以利用 javascript 和 jQuery 的组合来轻松完成此操作:

给定以下 HTML:

<div class="unsorted">
    <div rel="5">
      Div 5 here
    </div>
    <div rel="3">
       Div 3 Here
    </div>
     <div rel="4.5">
       Div 4.5 here
    </div>
    <div rel="4">
      Div 4 Here
     </div> </div>
<div class="sorted"></div>

此脚本将为您提供所需的输出:

$(document).ready(function () {
    var sortedDivs = $(".unsorted").find("div").toArray().sort(sorter);
    $.each(sortedDivs, function (index, value) {
        $(".sorted").append(value);
    });
});

function sorter(a, b) {
    return a.getAttribute('rel') - b.getAttribute('rel');
};