javascript - 根据子元素的内容对父元素进行排序 - javascript/jquery

Question

我有一个月历，显示当天发生的事件。生成的 HTML 如下所示:

<table class="event-cal">
  <tbody>
     <tr class="eventcont event-93">
        <td class="eventtime">19: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>
  </tbody>
</table>

我想要做的是根据 .eventtime 子元素的内容对 tr.eventcont 元素进行排序。排序必须在包含这些特定 .eventcont 元素的 .event-cal 元素内完成，因为我将在页面中包含多个 .event-cal 元素。

这是我到目前为止的代码，但它的作用是从页面中获取所有 tr.eventcont 元素并将它们全部粘贴到每个 .event-cal 表中。

$( document ).ready(function() {
var list = $(".event-cal").find(".eventcont");
        list.sort(sortDesc);
        $(".event-cal").html("");
        $(".event-cal").append(list);
    });
    function sortDesc(a, b){
        var test1 = jQuery(a);
        var test2 = jQuery(b);
        return test1.find(".eventtime").text() > test2.find(".eventtime").text();
}

Answer 1

您需要使用jquery.fn.each为每个表运行函数。

$('.event-cal').each(function() {
   var table = $(this),
      list = table.find('.eventcont').sort(sortDesc);

   table.empty().append(list);      
});