У меня есть нумерованный список имен. Я хочу отсортировать его по алфавиту одним нажатием кнопки, но только после выбора критерия сортировки из раскрывающегося списка (выберите).Сортировка списка HTML по возрастанию и убыванию, с jQuery
Проблема в том, что если я сортирую элементы по возрастанию и затем по убыванию, сортируются по убыванию отсортированные позиции после возрастающие отсортированные. Список становится больше.
$(document).ready(function(){
var sortItems = function() {
var sortedNames = [];
var sortedItms = [];
var rawNames = $('.list').find('li');
for (var i = 0; i < rawNames.length; i++) {
var names = $(rawNames[i]).text();
sortedNames.push(names);
}
$('#choose_order').on('change', function(){
var currVal = $(this).find("option:selected").val();
console.log(currVal);
if (currVal != 'default') {
$('#sortbtn').removeClass("disabled");
if (currVal == 'asc') {
sortedNames.sort();
} else {
sortedNames.sort();
sortedNames.reverse();
}
} else {
$('#sortbtn').addClass("disabled");
}
});
var setItems = function() {
sortedItms = [];
for (var j = 0; j < sortedNames.length; j++) {
var sortedItm = '<li>' + sortedNames[j] + '</li>';
sortedItms.push(sortedItm);
}
sortedItms.join('');
$('.list').html(sortedItms);
}
$('#sortbtn').on('click', setItems);
}
$(window).on('load', sortItems);
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="pannel">
<select name="choose_order" id="choose_order">
<option value="default" selected="selected">Choose sorting order</option>
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<div class="buttons_container">
<a class="btn btn-success disabled" id="sortbtn">Sort</a>
</div>
<ol class="list">
<li>Cosmin</li>
<li>Alina</li>
<li>Diana</li>
<li>Elena</li>
<li>Bogdan</li>
</ol>
</div>
Что я делаю неправильно?
Спасибо!
Возможный дубликат http://stackoverflow.com/questions/8837191/sort-an-html-list-with-javascript – Redu
Вы делаете '.push', чтобы добавить элементы в' sortedItms' массив, но я не вижу, чтобы вы очищали массив где угодно. Вы должны заменять элементы в этом массиве на каждый вид, а не добавлять к нему. – Santi