Сортировка блоков по возрастанию

322

23 августа 2017, 15:25

Есть обычный список li. Каждый задан с определенной высотой. Нужно отсортировать эти блок по возрастанию. Пробовал localeCompare но сортирует немного некорректно. В чем проблема? Или я не совсем нужный метод выбрал?

jQuery(document).ready(function($) { 
  var sortByHeight = function(a, b) { 
    var a = parseFloat($(a).css('height')) + ''; 
    var b = parseFloat($(b).css('height')) + ''; 
    return a.localeCompare(b); 
  } 
 
  var list = $("li").clone(); 
  list.sort(sortByHeight); 
  for (var i = 0; i < list.length; i++) { 
    $('#result').append(list[i]); 
  } 
});

ul { 
  list-style: none; 
  height: 100px; 
  float: left; 
  display: block; 
} 
 
li { 
  margin-right: 5px; 
  background: green; 
  width: 10px; 
  float: left; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li style="height: 100px;"></li> 
  <li style="height: 10px;"></li> 
  <li style="height: 90px;"></li> 
  <li style="height: 30px;"></li> 
  <li style="height: 80px;"></li> 
  <li style="height: 50px;"></li> 
  <li style="height: 60px;"></li> 
  <li style="height: 20px;"></li> 
  <li style="height: 40px;"></li> 
  <li style="height: 70px;"></li> 
</ul> 
<ul id="result"></ul>

Answer 1

На самом деле вам не нужно использовать localeCompare в данном случае т. к. вы должны сравнивать числа, а не строки.

jQuery(document).ready(function($) { 
  var sortByHeight = function(a, b) { 
    var a = $(a).height(); 
    var b = $(b).height(); 
    return a > b ? 1 : -1; 
  }; 
 
  var list = $("li").clone(); 
  list.sort(sortByHeight); 
  for (var i = 0; i < list.length; i++) { 
    $('#result').append(list[i]); 
  } 
});

ul { 
  list-style: none; 
  height: 100px; 
  float: left; 
  display: block; 
} 
 
li { 
  margin-right: 5px; 
  background: green; 
  width: 10px; 
  float: left; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li style="height: 100px;"></li> 
  <li style="height: 10px;"></li> 
  <li style="height: 90px;"></li> 
  <li style="height: 30px;"></li> 
  <li style="height: 80px;"></li> 
  <li style="height: 50px;"></li> 
  <li style="height: 60px;"></li> 
  <li style="height: 20px;"></li> 
  <li style="height: 40px;"></li> 
  <li style="height: 70px;"></li> 
</ul> 
<ul id="result"></ul>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Двойное нажатие на кнопку в safari

Суть проблемы, если заходить через браузер safari(телефон), на сайте в меню нужно нажимать 2 раза на категорию/подкатегорию, что б открыть ее, на всех...

310

HTML