3

Есть обычный список 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>

2 ответа 2

3

На самом деле вам не нужно использовать 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>

0

js vanilla в две строчки функциональщины О_о

let ul = document.querySelector('#myUl');
[].slice.call(ul.querySelectorAll('li'))
  .sort((one, two) => {
    return one.style.height.replace(/px/g, "") - two.style.height.replace(/px/g, "")
  })
  .forEach(item => ul.appendChild(item));
ul {
  list-style: none;
  height: 100px;
  float: left;
  display: block;
}

li {
  margin-right: 5px;
  background: green;
  width: 10px;
  float: left;
}
<ul id="myUl">
  <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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.