jquery - 如何通过下拉列表的变化根据数据属性对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>
尽管如此,这只是少量元素的示例。
推荐阅读
- c++ - 为什么我需要在以下情况下使用 std::decay ?
- javascript - gatsby-source-wordpress:在 netlify 部署的 ACF 字段中的图像上的 localFile 字段为空
- mongodb - 在 mongoDB 官方 docker 镜像中创建数据库和用户
- joomla3.0 - Joomla 3:将多个自定义用户字段选择到一个 html 表中
- java - 在 mule 中使用 cfx-client 发送使用soap服务的http post请求
- java - 清洁架构设计模式
- perl - 合并两个制表符分隔的文本文件
- android - 小部件没有出现,因为我在 android studio 中安排了它
- mysql - Codeigniter 3 对多列使用 db->like 会导致 SQL 相关错误
- python - Python:如何组合来自两个不同数据帧的特定列