Sort jQuery elements
Trying to figure out a more scalable solution to sorting DOM elements using jQuery
by VixedS
HTML
<table class="event-cal">
<tbody>
<tr class="eventcont event-93">
<td class="eventtime">17:00</td>
<td><a class="calendar-title" href="#">Event title</a><br></td></tr>
<tr class="eventcont event-237">
<td class="eventtime">13:00</td>
<td><a class="calendar-title" href="#">Event 2 title</a><br></td></tr>
<tr class="eventcont event-27">
<td class="eventtime">14:00</td>
<td><a class="calendar-title" href="#">Event 3 title</a><br></td></tr>
<tr class="eventcont event-2227">
<td class="eventtime">16:00</td>
<td><a class="calendar-title" href="#">Event 4 title</a><br></td></tr>
</tbody>
</table>
<div id="results"></div>
CSS
.eventtime{
display:inline-block;
padding:10px 20px;
background:#9CF;
margin:10px;
border-radius:5px;
}
JavaScript
$(".event-cal").each(function(){
var events=$('tr',this);
events.sort(function (a, b) {
a = parseInt($('.eventtime',a).text().replace(':',''));
b = parseInt($('.eventtime',b).text().replace(':',''));
if(a > b) {
return 1;
} else if(a < b) {
return -1;
} else {
return 0;
}
});
$(this).html(events);
});