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);      
});

Answer 2

选中 fiddle

$(".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);
});

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

2 个答案: