基于Jquery中的属性值的订单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>

Divs内容在这里
这里是第三组
这里是第四组
这里是4.5区

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

e、 g。

---

3,4,4.5,5

您可以使用DOM方法选择元素，将DOM列表转换为数组，然后使用。

我相信有一种更有效的方法，但我的答案是：

HTML:

<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>

Divs内容在这里
这里是第三组
这里是第四组
这里是4.5区

jQuery：

var array = new Array();

$('div').each(function(){   
    array.push($(this).attr('rel'));
});

array = array.sort();

var reordedDivs = "";

$.each(array, function(i, obj1){

    $('div').each(function(j, obj2) {

        if ($(obj2).attr('rel') == obj1) {

            var divContent = $(obj2).html();
            var rel = obj1;

         reordedDivs += "<div rel='" + rel + "'>" + divContent + "</div>";

        }

            });  
});

$('body').html(reordedDivs);

var数组=新数组（）；
$（'div'）。每个（函数（）{
array.push（$（this.attr（'rel'））；
});
array=array.sort（）；
var reordedivs=“”；
$.each（数组、函数（i、obj1）{
$（'div'）。每个（函数（j，obj2）{
if（$（obj2）.attr（'rel'）==obj1）{
var divContent=$（obj2.html（）；
var rel=obj1；
reordedDivs+=“”+divContent+“”；
}
});  
});
$（'body'）.html（reordedDivs）；

小提琴：参见我的小提琴：

您可以利用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>

---

你试过什么？到目前为止，你有什么？一个快速的谷歌搜索会产生几个插件，可以做到这一点：伟大的解决方案。我能够在大约30秒内实现这一点，对一些水平条形图进行排序。谢谢很好的解决方案。非常感谢。

$(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');
};