javascript - 按属性和链接文本对 div 中包含的链接进行排序
问题描述
我有一个包含许多链接的 div。
每个链接都有一个“数据方向”属性,包含 1、2 或 3 的整数。
我想向按钮添加一个单击事件,以对 div 中的链接进行排序,首先是“数据方向”属性,然后是链接文本。
例如,如果我从以下内容开始:
<div id="link_list">
<a href="#" data-direction="2">Allergy</a>
<a href="#" data-direction="1">Walking</a>
<a href="#" data-direction="3">Belltower</a>
<a href="#" data-direction="1">Apple</a>
<a href="#" data-direction="2">Affable</a>
</div>
...我的目标是排序为:
<div id="link_list">
<a href="#" data-direction="1">Apple</a>
<a href="#" data-direction="1">Walking</a>
<a href="#" data-direction="2">Allergy</a>
<a href="#" data-direction="2">Affable</a>
<a href="#" data-direction="3">Belltower</a>
</div>
解决方案
感谢上述 Rory McCrossan 的指导,以下内容似乎适用于我的用例。
这会设置一个名为 的变量link_sort_direction
,用于记录相关 div 的排序状态。
<script type="application/javascript">
var link_sorted_direction = true;
$('#sort_links').click(function (e) {
var elements = $('#div_links').children('a');
if (link_sorted_direction === true) {
link_sorted_direction = false;
elements.sort(function (a, b) {
var nameA = $(a).text();
var nameB = $(b).text();
return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
})
} else {
link_sorted_direction = true;
elements.sort(function (a, b) {
var contentA = parseInt($(a).attr('data-direction'));
var contentB = parseInt($(b).attr('data-direction'));
if (contentA === contentB) {
var nameA = $(a).text();
var nameB = $(b).text();
return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
} else {
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
}
});
}
$('#div_links').append(elements);
e.preventDefault();
})
</script>
我将不胜感激任何改进建议。
推荐阅读
- node.js - 如何正确更新 module.exports?
- cors - Haproxy CORS 请求的资源上不存在“Access-Control-Allow-Origin”标头
- python - 在 Python 中调试 xml ElementTrees
- apache-flink - Flink example job of long-running streaming processing
- java - 创建页面加载动画是spring boot
- python - Python:根据其值将一列拆分为两列
- html - 如何使用 CSS 在顶部和底部制作一个打开的盒子作为容器?
- python - 分配器 (GPU_0_bfc) 尝试分配内存不足
- sql - 在 PostgreSQL 12 上按 id(唯一)分组的一次查询中同时获取房间成员、房间所有者和管理员
- reactjs - 如何在 ReactJs 应用程序中使用 reduce() 而不是传统的 foreach 循环