jquery - 排序代码的错误在哪里

Question

大家好，请帮助我找不到错误

当我按排序时......它会一次又一次地排序

html:

<div class="unsorted">
    <div class="labelimagediv" rel="5"> 
      Div 5 here 
    </div> 
    <div class="labelimagediv" rel="3"> 
       Div 3 Here 
    </div> 
     <div class="labelimagediv" rel="4.5"> 
       Div 4.5 here 
    </div>
    <div class="labelimagediv" rel="4">
      Div 4 Here
     </div> </div>
<button class="btnSort">Sort</button>

javascript:

$("button.btnSort").click(function () {
    var item1 = $('div.labelimagediv')[0];
    var sortedDivs = $(".unsorted").find(item1).toArray().sort(sorter);
    $.each(sortedDivs, function (index, value) {
        $(".unsorted").append(value);
    });
});

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

Answer 1

那是因为您通过选择第一个元素对一个元素进行排序$('div.labelimagediv')[0];，试试这个：

$("button.btnSort").click(function () {
    $('div.labelimagediv').sort(function(a, b) {
       return a.getAttribute('rel') > b.getAttribute('rel');
    }).appendTo(".unsorted");
});

JsFiddle 叉在这里

Answer 2

var item1 = $('div.labelimagediv')[0];

^^ 那只是一个单一的元素？

它应该是 ：

$("button.btnSort").click(function () {
    var sortedDivs = $('.labelimagediv', '.unsorted').get();
    sortedDivs.sort(function(a,b) {
        return a.getAttribute('rel') - b.getAttribute('rel');
    });
    $.each(sortedDivs, function (index, value) {
        $(".unsorted").append(value);
    });
});

小提琴