排序代码中的错误在哪里

时间:2013-09-12 22:06:04

标签: jquery html

嘿大家请帮忙我找不到错误

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

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

2 个答案:

答案 0 :(得分:4)

那是因为你通过选择第一个元素$('div.labelimagediv')[0];来排序一个元素,试试这个:

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

JsFiddle fork here

答案 1 :(得分:1)

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);
    });
});

FIDDLE