1

这是我当前的 html 结构。 

<div id="eventContainer">
  <div id="10_10_am" class="eventbytimeContainer"> some data... </div>
  <div id="08_30_pm" class="eventbytimeContainer"> some data... </div>
  <div id="09_00_am" class="eventbytimeContainer"> some data... </div>
  <div id="04_00_pm" class="eventbytimeContainer"> some data... </div>
  <div id="10_30_am" class="eventbytimeContainer"> some data... </div>
  <div id="09_30_pm" class="eventbytimeContainer"> some data... </div>
</div>

我想根据 div id 对其进行排序，这些 id 只不过是格式化的时间，比如10_10_ammean 10:10 am。我想要的结构是：

<div id="eventContainer">
  <div id="09_00_am" class="eventbytimeContainer"> some data... </div>
  <div id="10_10_am" class="eventbytimeContainer"> some data... </div>
  <div id="10_30_am" class="eventbytimeContainer"> some data... </div>
  <div id="04_00_pm" class="eventbytimeContainer"> some data... </div>
  <div id="08_30_pm" class="eventbytimeContainer"> some data... </div>  
  <div id="09_30_pm" class="eventbytimeContainer"> some data... </div>
</div>

如何计算这些 id 并进行相应排序？

4

2 回答 2

1

我有你的问题的解决方案。请看小提琴。http://jsfiddle.net/ardeezstyle/9unts/

var sortFunction=function(){
var id;
for(i=0;i<$('#eventContainer').children().length;i++){
    id=$('#eventContainer').children().eq(i).attr('id');
    new_id=formatId(id);
    if(id.indexOf('am')!=-1){
        time_in_am.push(new_id);
    }else{
        time_in_pm.push(new_id);
    }
}
time_in_am.sort();
time_in_am.reverse();
time_in_pm.sort();
time_in_pm.reverse();

for(j=0;j<time_in_pm.length;j++){
    $('#'+deFormatId(time_in_pm[j])+'_pm').prependTo('#eventContainer');
}
for(k=0;k<time_in_am.length;k++){
    $('#'+deFormatId(time_in_am[k])+'_am').prependTo('#eventContainer');
}
};

让我知道它是否可以帮助您解决问题。

于 2013-07-16T05:51:41.450 回答
0

我已经接受了所有内容id's of the div，myArray然后使用函数将其转换为24 hour format（例如10_10_am to 1010 and 09_30_pm to 2130），am_pm_to_hours而不是使用函数排序数组，sortmyway而不是使用函数转换回hours_am_pmget 而不是排序的 div id （例如1010 to 10_10_am and 2130 to 09_30_pm），然后将排序数组追加到div id eventContainer.

HTML

    <div id="eventContainer">
        <div id="10_10_am" class="eventbytimeContainer">some data...id:10_10_am</div>
        <div id="08_30_pm" class="eventbytimeContainer">some data...id:08_30_pm</div>
        <div id="09_00_am" class="eventbytimeContainer">some data...id:09_00_am</div>
        <div id="04_00_pm" class="eventbytimeContainer">some data...id:04_00_pm</div>
        <div id="10_30_am" class="eventbytimeContainer">some data...id:10_30_am</div>
        <div id="09_30_pm" class="eventbytimeContainer">some data...id:09_30_pm</div>
    </div>

js

    $(document).ready(function () {
    function am_pm_to_hours(time) {
        var hours = Number(time.match(/^(\d+)/)[1]);
        var minutes = Number(time.match(/:(\d+)/)[1]);
        var AMPM = time.match(/\s(.*)$/)[1];
        if (AMPM == "pm" && hours < 12) hours = hours + 12;
        if (AMPM == "am" && hours == 12) hours = hours - 12;
        var sHours = hours.toString();
        var sMinutes = minutes.toString();
        if (hours < 10) sHours = "0" + sHours;
        if (minutes < 10) sMinutes = "0" + sMinutes;
        return (sHours + sMinutes);
    }

    function hours_am_pm(time) {
        var hours = time[0] + time[1];
        var min = time[2] + time[3];
        if (hours < 12) {
            return hours + '_' + min + '_am';
        } else {
            return hours-12 + '_' + min + '_pm';
        }
    }
    myArray = [];
    $('#eventContainer .eventbytimeContainer').each(function () {
        id = $(this).attr('id');
        var n = id.split("_");
        time = am_pm_to_hours(n[0] + ':' + n[1] + ':' + ' ' + n[2]);
        myArray.push(time);
    });
    console.log(myArray);

    function sortmyway(data_A, data_B) {
        return (data_A - data_B);
    }
    myArray.sort(sortmyway);

    for (i = 0; i < myArray.length; i++) {
        myArray[i] = hours_am_pm(myArray[i]);
    }

    $.each(myArray, function (index, value) {
        if(value.length == 7){
            value = '0'+value;
        }
        $('#eventContainer').append($('#'+value));
    });
});

工作演示 http://jsfiddle.net/cse_tushar/5c83m/1/

于 2013-07-16T06:09:05.500 回答