Как отсортировать деления на основе атрибута данных с изменением выпадающего

Question

У меня есть страница результатов, которая отображает результаты в div. у этих элементов есть несколько атрибутов данных, которые я хочу использовать для изменения порядка их возрастания и убывания.

например:

<div data-price="15000" data-pet="1" data-balcony="0">content</div>    

Я хочу изменить их порядок с помощью выпадающего списка

<select>
<option value="0">Sort by</option>
<option value="1">Low price to high</option>
<option value="2">high price to low</option>
</select>

может кто-нибудь помочь? количество делений является переменным.

Answer 1

Если данных много, то их выполнение в браузере может быть довольно медленным, лучше делать это на сервере.

Вот грязное решение с использованием jQuery.

var rooms = $('.room');
var roomList = $('#room-list');

$('#price-sort').change( function() {
    if($(this).val() == 1){
       sortAsc();
    }
    else if($(this).val() == 2){
        sortDesc();
    }
});

function sortAsc(){
    roomList.empty();
    rooms.sort(function(a, b){
      return $(a).data('price')-$(b).data('price')
    });
    roomList.append(rooms);
}
function sortDesc(){
    roomList.empty();
    rooms.sort(function(a, b){
      return $(b).data('price')-$(a).data('price')
    });
    roomList.append(rooms); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price-sort">
<option value="0">Short by</option>
<option value="1">Low price to high</option>
<option value="2">high price to low</option>
</select>

<div id="room-list">
<div data-price="15000" data-pet="1" data-balcony="0" class="room">First - Price: 15000</div>
<div data-price="95000" data-pet="1" data-balcony="0" class="room">Second - Price: 95000</div>
<div data-price="65000" data-pet="1" data-balcony="0" class="room">Third - Price: 65000</div>
<div data-price="9000" data-pet="1" data-balcony="0" class="room">Fourth - Price: 9000</div>
<div data-price="10000" data-pet="1" data-balcony="0" class="room">Fifth - Price: 10000</div>
</div>

Тем не менее, это всего лишь пример для небольшого количества элементов.