分享一个H5使用JQ首字母排序的通讯录
以下是一个简单的H5使用jQuery实现首字母排序的通讯录示例：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首字母排序通讯录</title>
<style>
#contactList {
width: 300px;
}
.contact {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<div id="contactList">
<div class="contact" data-key="A">Alice</div>
<div class="contact" data-key="B">Bob</div>
<div class="contact" data-key="C">Charlie</div>
<!-- 更多联系人 -->
</div>
<button id="sortBtn">按首字母排序</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#sortBtn').click(function() {
var contacts = $('#contactList .contact').get();
$('#contactList').html(sortContacts(contacts));
});
});
function sortContacts(contacts) {
contacts.sort(function(a, b) {
var keyA = $(a).data('key').toUpperCase(); // 使用data-key作为排序依据
var keyB = $(b).data('key').toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
return $(contacts);
}
</script>
</body>
</html>这段代码中，我们定义了一个简单的通讯录列表，每个通讯录项目都有一个data-key属性，表示其首字母。点击按钮后，会触发排序函数，将列表中的通讯录按照data-key的字母顺序重新排列。这个例子展示了如何使用jQuery处理DOM元素和实现简单的排序功能。
评论已关闭