按2个条件对HTML列表进行排序 [英] Sort HTML list by 2 criteria
本文介绍了按2个条件对HTML列表进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试对包含标题和日期的字符串列表进行排序. 第一个jQuery按第一个字符的字母顺序对列表进行排序(来自W3学校) 但是，第二个jQuery应该按包含Date的字符串的后半部分进行排序. 通过在字符串中查找-"，我对第一个jQuery做了一些改动. 它确实对列表进行了排序，但是问题在于它通过将结果与标题(城市名称)分组来对日期进行排序.因此，存在针对每个重复的城市名称实例进行排序的日期，而不是针对随机城市名称的真实排序.
I'm trying to sort a list of strings containing a title and a date. The first jQuery sorts the list alphabetically by the first character (from W3 school) The second jQuery however is supposed to sort by the second half of the string containing a Date. I changed a bit the first jQuery to do that, by looking for a '- ' in the string. It does sort the list, however the problem is that it sorts the dates by grouping the results with the title (city name). So there are dates sorted for every repeating instance of city names, not a true sorting for random city names.
看起来好像是通过按首字母(原始jquery)对列表进行排序来对日期进行排序.
It appears as if it sorts the Dates by keeping the list sorted by the first letter (original jquery).
jsfiddle: https://jsfiddle.net/aprilius/638jbq7o/3/
The 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>
已解决:完整的jQuery，由@Cristian Sarghe修复，用于按标题和日期对条目(字符串)列表(Title - YYYY/MM/DD)进行排序，升序和降序如下:
SOLVED: The full jQuery, fixed by @Cristian Sarghe, to sort a list of entries (strings) as Title - YYYY/MM/DD both by title and date, ascending and descending is as follows:
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;}}}}
推荐答案
这是一个类似分号的类型问题.
That's one semicolon-like type problem.
您正在使用string原型上的slice('- ')函数.
您应该给它传递索引，而不是字符串.
You are using the slice('- ') function on string prototype.
You should pass an index to it, not a string.
从技术上讲，只需在必要时使用b[i].innerHTML.indexOf('- ')，并使用b[i]和b[i+1]作为slice(...)的参数，而不是字符串.
Technically, just use b[i].innerHTML.indexOf('- ') using b[i] and b[i+1] where necessary, as a parameter for slice(...), instead of the string.
JSFiddle: https://jsfiddle.net/w6L41v3p/
JSFiddle: https://jsfiddle.net/w6L41v3p/
这篇关于按2个条件对HTML列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
