如何根据数据属性对div进行排序,并更改下拉列表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何根据数据属性对div进行排序,并更改下拉列表相关的知识,希望对你有一定的参考价值。

我有一个结果页面,以div形式呈现结果。这些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>

有人可以帮忙吗? div的数量是可变的。

答案

如果数据很多,那么在浏览器上执行此操作可能会非常慢,最好在服务器上执行此操作。

这是一个使用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>

以上是关于如何根据数据属性对div进行排序,并更改下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

根据属性的动态列表对 Swift 数组进行排序

按列表中的顺序对 html DOM 元素进行排序

如何根据 Dart 中的 int 属性对所有 Class 属性进行排序?

根据使用 Jexcel 选择的另一个下拉列表更改下拉列表值

Vue.js:根据方法对列表进行排序

如何根据对象的属性对对象列表进行排序?