Сортировка div по времени (24-часовой формат) Использование jQuery

0

Я пытаюсь сортировать свои divs на основе Time как 07:39 > 16:00 > 21:20

HTML

<div id="original"> <div timestamp="99" data-price="4811" data-time="16:00">16:00</div>
<div timestamp="999" data-price="4872" data-time="21:00">21:00</div>
<div timestamp="12" data-price="8586" data-time="07:00">07:00</div>
<div timestamp="11" data-price="5760" data-time="18:00">18:00</div>
<div timestamp="10" data-price="9510" data-time="05:30">05:30</div>
<div timestamp="9" data-price="9510" data-time="13:00">13:00</div>
<div timestamp="8"  data-price="4872" data-time="15:00">15:00</div>
<div timestamp="7" data-price="9510" data-time="14:00">14:00</div>
</div>

JQuery/Javascript

function Depart() {
var item = $("#original div").sort(function (a, b) {
    var Atime = $(a).attr("data-time");
    var Adt = new Date();
    var Adtparts = Atime.split(':');
    Adt.setHours(Adtparts[0], Adtparts[1], 0, 0);
    console.log(Adt.getTime());
    var Btime = $(b).attr("data-time");
    var Bdt = new Date();
    var Bdtparts = Btime.split(':');
    Bdt.setHours(Bdtparts[0], Bdtparts[1], 0, 0);


    if (Adt.getTime() > Bdt.getTime()) {
        return 1;
    } else if (Adt.getTime() > Bdt.getTime()) {
        return -1;
    }
    else {
      return  0;
    }
});

$("#maindiv").append(item);

}

скрипка

Эта функция jQuery не работает. Можете ли вы проверить и сказать, что неправильно в этом скрипте? Тот же скрипт работает для цены данных.

  • 1
    Вы даже не вызываете функцию
  • 2
    Зачем разбивать и использовать дату вообще? Это будет прекрасно работать как строка. В какой вселенной это правда: 16:00> 07:39> 21:20?

5 ответов

2
Лучший ответ

скрипка

Добавьте maindiv в html и вызовите Отправление в jquery.

<div id="maindiv"></div>

Depart();
1

вы забыли позвонить в Depart(); функция

$( document ).ready(function() {
    Depart();
});
1

Вы сделали все правильно, но забыли вызвать функцию

Depart();

А также вы не упомянули div maindiv в html. Если вам нужны отсортированные значения внутри #original div, вы можете указать $("#original").append(item); вместо $("#maindiv").append(item);

См. Рабочую демонстрацию здесь

  • 0
    @mplungjan: Любой pblm с моим ответом?
  • 0
    Простите за это. обновил мою скрипку.
0

Хорошо, я пытался понять ваш код. Но это заняло слишком много времени. Итак, я написал что-то свое. Надеюсь, ты не возражаешь.

Ну, я не рассматривал предмет как объект Date(), строка отлично подходит для этого. Итак, что я сделал:

function Depart() {
    var elms = $("[data-time]", "#original"),
        times = [],
        newTime = [],
        html = $("<div />");

    // Getting Time
    elms.each(function(){
        times.push($(this).data("time").replace(":", ""));
    });

    times.sort(); // Sorting
    //times.reverse(); // If required

    // Resetting format
    $.each(times, function(c, obj){
        newTime.push(obj.substr(0,2) + ":" + obj.substr(2,4));
    });

    // Creating new HTML
    $.each(newTime, function(c, obj){
        elms.each(function(){
            if($(this).data("time") == obj){
                html.append($(this));
            }
        });
    });

    // Setting the HTML
    $("#original").html(html);
}

Depart();

Вот рабочая скрипка: http://jsfiddle.net/ashishanexpert/D6Ww5/7/

Я хочу, это поможет вам!

  • 0
    Потому что это намного легче понять, чем 7 необходимых строк?
  • 0
    @mplungjan: если я уберу разрывы строк / пробелы и комментарии, строк кода будет даже меньше, чем в исходном.
Показать ещё 1 комментарий
0

Вот код без ненужной манипуляции с датой. Это работает, потому что ваше время дополняется 0

Live demo

function Depart() {
  var item = $("#original div").sort(function (a, b) {
    var Atime = $(a).attr("data-time");
    var Btime = $(b).attr("data-time");
    if (Atime > Btime) return 1;
    if (Atime < Btime) return -1;
    return  0;
  });
  $("#maindiv").append(item); // or $("#original").append(item); 
}
Depart(); // execute

Я предполагаю, что вы хотите выполнить полет на загрузку и щелкнуть что-то:

$(function() {
  $("#depart").on("click",function() {
    Depart();
  }).click(); // assign onload and click it right away
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню