Question

我正在尝试根据时间对我的div进行排序，例如 07:39 ＆gt; 16:00 ＆gt;的 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);

}

Fiddle

这个jQuery函数不起作用。你能检查并告诉我出了什么问题在这个脚本？相同的脚本适用于数据价格。

Answer 1

Fiddle

在html＆amp;中添加maindiv打电话给jquery。

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

Depart();

Answer 2

你已经做好了一切，但忘记了调用函数

Depart();

而且你没有在html中提到div maindiv。如果您需要#original div中的排序值，那么您可以提及$("#original").append(item);而不是$("#maindiv").append(item);

查看工作演示here

Answer 3

您忘了拨打Depart();功能

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

Answer 4

这是没有不必要的日期操作的代码。这是有效的，因为你的时间用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
});

Answer 5

好的，我试图理解你的代码。但是，花了太多时间。所以，我写了一些东西。希望你不介意。

好吧，我没有将该事件视为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/

我希望，这对你有帮助！

Answer 6

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

基于时间排序div（24小时格式）使用jQuery

6 个答案: