2012-06-13 3 views
2

Я использую этот very handy plugin для сортировки элементов. Но сравнение элементов по числовому значению приводит к некорректному результату: 99, 98, 9, 83, 8, 78 и т. Д.Сортировка элементов с использованием jquery (проблема с численными сопоставимыми данными)

Будет ли это проблемой для плагина или того, как я его реализовал?

Код:

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script language="javascript"> 
jQuery.fn.sortElements = (function(){ 
    var sort = [].sort; 
    return function(comparator, getSortable) { 
     getSortable = getSortable || function(){return this;}; 
     var placements = this.map(function(){ 

      var sortElement = getSortable.call(this), 
       parentNode = sortElement.parentNode, 
       nextSibling = parentNode.insertBefore(
        document.createTextNode(''), 
        sortElement.nextSibling 
       ); 

      return function() { 

       if (parentNode === this) { 
        throw new Error(
         "You can't sort elements if any one is a descendant of another." 
        ); 
       } 
       parentNode.insertBefore(this, nextSibling); 
       parentNode.removeChild(nextSibling); 
      }; 

     }); 
     return sort.call(this, comparator).each(function(i){ 
      placements[i].call(getSortable.call(this)); 
     }); 
    }; 
})(); 

$(document).ready(function(){ 

    $('.item').sortElements(function(a,b){ 
     return $(a).html() < $(b).html() ? 1 : -1; 
    }); 

}); 
</script> 
</head> 
<body> 

<% for i = 0 to 100 %> 
<div class="item"><%=i*Rnd%></div> 
<% next %> 

</body> 
</html> 

ответ

3

Если вы хотите сделать что-то вроде на основе числовых значений строк, а затем преобразовать строки в число с parseIntMDN docs методом

$('.item').sortElements(function(a,b){ 
     return parseInt($(a).html(),10) < parseInt($(b).html(),10) ? 1 : -1; 
    }); 

(или parseFloatMDN docs для чисел с плавающей точкой, так как Gaurav упоминается в комментариях ..)

+2

parseFloat (строка) –

+0

@GauravShah, да поддержать десятичного 'parseFl oat' следует использовать .. Я пошел с примерными значениями, которые являются целыми .. –

+0

Это было всего лишь предложение опроснику :) –

0

Вы сравниваете строки. В Javascript "88" < "9", но (очевидно) 88 > 9, или (+"88" > +"9"). Вы должны преобразовать строки в число в вашей функции сравнения:

return +$(a).html() < +$(b).html() ? 1 : -1; 
Смежные вопросы