html - 按 2 个条件对 HTML 列表进行排序
问题描述
我正在尝试对包含标题和日期的字符串列表进行排序。第一个 jQuery 按第一个字符的字母顺序对列表进行排序（来自 W3 学校） 第二个 jQuery 应该按包含日期的字符串的后半部分排序。通过在字符串中查找“-”，我对第一个 jQuery 进行了一些更改。它确实对列表进行了排序，但问题是它通过将结果与标题（城市名称）分组来对日期进行排序。因此，城市名称的每个重复实例都会对日期进行排序，而不是随机城市名称的真正排序。
看起来好像它通过保持列表按第一个字母（原始 jquery）排序来对日期进行排序。
jsfiddle： https ://jsfiddle.net/aprilius/638jbq7o/3/
和整个页面：
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.center {
margin: auto;
width: 70%;
border: 3px solid #73AD21;
padding: 10px;
-webkit-column-width: 240px;
-moz-column-width: 240px;
column-width: 240px;
column-gap:20px;
-moz-column-gap:20px;
-webkit-column-gap:20px;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;}
</style>
</head>
<body>
<div class="center">
<button onclick="sortListAZ()">Sort by Title</button>
<button onclick="sortListDate()">Sort by Date</button>
<input type="text" id="filterbar" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<script>
function sortListAZ() {
var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("example");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
// Make a loop that will continue until no switching has been done:
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("LI");
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should switch place with the current item, based on the sorting direction (asc or desc): */
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically lower than current item, mark as a switch and break the loop: */
shouldSwitch = true;
break;}}
else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically higher than current item, mark as a switch and break the loop: */
shouldSwitch= true;
break;}}}
if (shouldSwitch) {
/* If a switch has been marked, make the switch and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is done, increase switchcount by 1:
switchcount ++;}
else {
/* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;}}}}
</script>
<script>
function sortListDate() {
var list, i, switching, b, c, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("cuprins");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
// Make a loop that will continue until no switching has been done:
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("LI");
//substr(list.getElementsByTagName("LI").length - 8);
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should switch place with the current item, based on the sorting direction (asc or desc): */
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) > b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* checking the string for Date after "- " */
/* if next item is alphabetically lower than current item, mark as a switch and break the loop: */
shouldSwitch = true;
break;}}
else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) < b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* if next item is alphabetically higher than current item, mark as a switch and break the loop: */
shouldSwitch= true;
break;}}}
if (shouldSwitch) {
/* If a switch has been marked, make the switch and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is done, increase switchcount by 1:
switchcount ++;}
else {
/* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;}}}}
</script>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("filterbar");
filter = input.value.toUpperCase();
ul = document.getElementById("example");
li = ul.getElementsByTagName("LI");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";}}}
</script>
<ul id="example">
<li><a href="#">Edinburgh - 2011/04/25</a></li>
<li><a href="#">Tokyo - 2011/07/25</a></li>
<li><a href="#">San Francisco - 2009/01/12</a></li>
<li><a href="#">Edinburgh - 2012/03/29</a></li>
<li><a href="#">Tokyo - 2008/11/28</a></li>
<li><a href="#">New York - 2012/12/02</a></li>
<li><a href="#">San Francisco - 2012/08/06</a></li>
<li><a href="#">Tokyo - 2010/10/14</a></li>
<li><a href="#">San Francisco - 2009/09/15</a></li>
<li><a href="#">Edinburgh - 2008/12/13</a></li>
<li><a href="#">London - 2008/12/19</a></li>
<li><a href="#">Edinburgh - 2013/03/03</a></li>
<li><a href="#">San Francisco - 2008/10/16</a></li>
<li><a href="#">London - 2012/12/18</a></li>
<li><a href="#">London - 2010/03/17</a></li>
<li><a href="#">London - 2012/11/27</a></li>
<li><a href="#">New York - 2010/06/09</a></li>
<li><a href="#">New York - 2009/04/10</a></li>
<li><a href="#">London - 2012/10/13</a></li>
<li><a href="#">Edinburgh - 2012/03/26</a></li>
<li><a href="#">New York - 2011/09/03</a></li>
<li><a href="#">New York - 2009/06/25</a></li>
<li><a href="#">New York - 2011/12/12</a></li>
<li><a href="#">Sydney - 2010/09/20</a></li>
<li><a href="#">London - 2009/10/09</a></li>
<li><a href="#">Edinburgh - 2010/12/22</a></li>
<li><a href="#">Singapore - 2010/11/14</a></li>
<li><a href="#">San Francisco - 2011/06/07</a></li>
<li><a href="#">San Francisco - 2010/03/11</a></li>
</ul>
</div>
</body>
</html>
已解决：由@Cristian Sarghe 修复的完整 jQuery，用于Title - YYYY/MM/DD按标题和日期对条目（字符串）列表进行排序，升序和降序如下：
function sortListDate() {
var list, i, switching, b, c, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("cuprins");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
// Make a loop that will continue until no switching has been done:
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("LI");
//substr(list.getElementsByTagName("LI").length - 8);
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should switch place with the current item, based on the sorting direction (asc or desc): */
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) > b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* checking the string for Date after "- " */
/* if next item is alphabetically lower than current item, mark as a switch and break the loop: */
shouldSwitch = true;
break;}}
else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) < b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* if next item is alphabetically higher than current item, mark as a switch and break the loop: */
shouldSwitch= true;
break;}}}
if (shouldSwitch) {
/* If a switch has been marked, make the switch and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is done, increase switchcount by 1:
switchcount ++;}
else {
/* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;}}}}
解决方案
这是一个类似分号的类型问题。
您正在原型上使用该slice('- ')功能。string您应该将索引传递给它，而不是字符串。
从技术上讲，只需在必要时使用b[i].innerHTML.indexOf('- ')usingb[i]和作为 的参数，而不是字符串。b[i+1]slice(...)
JSFiddle：https ://jsfiddle.net/w6L41v3p/
推荐阅读
- wpf - 如何从基类和派生类更改 WPF DataGrid 中显示的属性的数据顺序？
- java - 排序矩阵中的二分搜索
- sql - 如何使 max() 函数只输出一行
- java - 如何从其父元素（h3）中删除所有子元素（span）？
- python - 使用 OpenCV 时无法将图像转换为灰度
- algorithm - 定义仅针对 2D 平面上特定形状内的点触发的神经网络的权重和阈值
- c - 如何在 Swift 中处理 c 枚举回调函数
- mysql - MySQL 索引大小
- javascript - 尝试使用 Cypress.io 登录，但收到 CORS 错误“来源不匹配”
- javascript - 如何在 Nuxt.js 上设置未知的 baseUrl？