sort by button descending & ascending
Question
This button has three modes: First, Descending, Second Ascending Mode and Third Mode; No Sorting and I want to sort with jQuery.
<div class="full-item"> <div class="button-item"> <button id="Sort-item">Sort by</button> </div> <div class="item-sort"> <div class="item"> <div class="pic"></div> <div class="time" style="background: red;"><span>15:20</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>13:10</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>18:40</span></div> </div> </div> </div>
<body> <style> body{ margin: 0 auto; padding: 0 auto; background: skyblue; } .full-item{ width: 800px; height: 600px; margin: 50px auto; background: grey; } .full-item .button-item{ width: 100%; height: 80px; background: #B33771; } .full-item .button-item button{ margin: 30px 45%; } .full-item .item-sort{ width: 100%; height: 500px; background: white; margin-top: 10px; } .full-item .item-sort:first-child{ margin-top: 10px; } .full-item .item-sort .item{ width: 90%; height: 140px; background: red; /*padding: 10px;*/ margin: 10px auto; } .item-sort .item .pic{ width: 30%; height: 100%; background: #3B3B98; float: left; } .item-sort .item .time{ width: 70%; height: 100%; background: #1B9CFC; float: right; } .item-sort .item .time span{ color: white; text-align: center; display: block; line-height: 100px; } </style> <div class="full-item"> <div class="button-item"> <button id="Sort-item">Sort by</button> </div> <div class="item-sort"> <div class="item"> <div class="pic"></div> <div class="time" style="background: red;"><span>15:20</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>13:10</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>18:40</span></div> </div> </div> </div> </body>
$("#Sort-item").click(function(){ $(".item").sort(function(a, b) { return new Date($(a).find(".timeA")) > new Date($(b).find(".timeB")); }).each(function() { $(".item-sort").prepend(this); }) });
<body> <style> body{margin: 0 auto;padding: 0 auto;background: skyblue;} .full-item{width: 800px;height: 600px;margin: 50px auto;background: grey;} .full-item .button-item{width: 100%;height: 80px;background: #B33771;} .full-item .button-item button{margin: 30px 45%;} .full-item .item-sort{width: 100%;height: 500px;background: white;margin-top: 10px;} .full-item .item-sort:first-child{margin-top: 10px;} .full-item .item-sort .item{width: 90%;height: 140px;background: red;margin: 10px auto;} .item-sort .item .pic{width: 30%;height: 100%;background: #3B3B98;float: left;} .item-sort .item .time{width: 70%;height: 100%;background: #1B9CFC;float: right;} .item-sort .item .time span{color: white;text-align: center;display: block;line-height: 100px;} </style> <div class="full-item"> <div class="button-item"> <button id="Sort-item">Sort by</button> </div> <div class="item-sort"> <div class="item"> <div class="pic"></div> <div class="time"><span>15:20</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>13:10</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>18:40</span></div> </div> </div> </div> </body>
1 answers
solution1
1 ACCPTED 2018-12-29 18:30:27
I don't know how you divided your files as your question has many snippets and it's not clear where anything goes but you can find the way to do it in vanilla JS below (it's important to understand how vanilla JS handles this before jumping to JQuery).
I tried to stay as true as possible to your original CSS (despite thinking that it is a little bit inflated) and I merged the entire thing into a single document. Here goes:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0 auto; padding: 0 auto; background: skyblue; } .full-item { width: 800px; height: 600px; margin: 50px auto; background: grey; } .full-item .button-item { width: 100%; height: 80px; background: #B33771; } .full-item .button-item button { margin: 30px 45%; } .full-item .item-sort { width: 100%; height: 500px; background: white; margin-top: 10px; } .full-item .item-sort:first-child { margin-top: 10px; } .full-item .item-sort .item { width: 90%; height: 140px; background: red; margin: 10px auto; } .item-sort .item .pic { width: 30%; height: 100%; background: #3B3B98; float: left; } .item-sort .item .time { width: 70%; height: 100%; background: #1B9CFC; float: right; } .item-sort .item .time span { color: white; text-align: center; display: block; line-height: 100px; } </style> </head> <body> <div class="full-item"> <div class="buttons"> <div class="button-item"> <button id="Sort-item-asc">Sort Asc</button> </div> <div class="button-item"> <button id="Sort-item-desc">Sort Desc</button> </div> <div class="button-item"> <button id="Sort-item-no">No Sort</button> </div> </div> <div class="item-sort"> <div class="item"> <div class="pic"></div> <div class="time"><span>15:20</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>13:10</span></div> </div> <div class="item"> <div class="pic"></div> <div class="time"><span>18:40</span></div> </div> </div> </div> <script> const buttonAsc = document.getElementById("Sort-item-asc") const buttonDesc = document.getElementById("Sort-item-desc") const buttonNo = document.getElementById("Sort-item-no") const times = document.getElementsByClassName("time") const originalHours = [] for (let i = 0; i < times.length; i++) { const hour = times[i].innerText; originalHours.push(hour) } buttonAsc.onclick = function () { let hours = [] for (let i = 0; i < times.length; i++) { const hour = times[i].innerText; hours.push(hour) } hours.sort() for (let i = 0; i < hours.length; i++) { times[i].firstElementChild.innerText = hours[i]; } } buttonDesc.onclick = function () { let hours = [] for (let i = 0; i < times.length; i++) { const hour = times[i].innerText; hours.push(hour) } hours.sort() hours.reverse() for (let i = 0; i < hours.length; i++) { times[i].firstElementChild.innerText = hours[i]; } } buttonNo.onclick = function () { for (let i = 0; i < originalHours.length; i++) { times[i].firstElementChild.innerText = originalHours[i]; } } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Sort descending and ascending on click
How to sort an array ascending and descending?
JQuery Sort ascending and descending (Not a table)
How to sort by alphabetically (ascending and descending) in JavaScript
Sort elemenets ascending and descending with data attribute
JavaScript Sort Function with Descending Dates and Ascending Times
Cannot sort table headers by ascending or descending
Table sort store whether ascending or descending?
how sort columns in ascending and descending order?
Kendo UI Grid - Sort by Descending Before Ascending
Related Tags