通过jquery计算id值来对div进行排序

Question

这是我目前的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对其进行排序，除了10_10_am之类的格式化时间意味着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并进行相应排序？

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

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

Answer 2

我已使用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_pm以获得排序后的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/