jjzjj

javascript 按最近的开始日期时间排序以显示最远的距离和另一个属性

coder 2025-01-19 原文

我必须按开始日期时间进行排序，并引用具有多个属性的当前日期时间。 例如，我有这个列表:

<ul>
    <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
    <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
    <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
    <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>
    <li data-startDate="09-04-2019 15:00" data-inplay=true> Name5</li>
    <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
    <li data-startDate="09-04-2019 15:05" data-inplay=true> Name7</li>
    <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

并且当前日期时间是 09-04-2019 15:15，所需的输出应该是:

<!--
  Let currentDate = 09-04-2019 15:15
  Sort priority:
    1. inplay is true
    2. startDate is greater than currentDate
    3. startDate is lesser than currentDate
-->
<ul>
  <!-- inplay == true -->
  <li data-startDate="09-04-2019 15:05" data-inplay=true>Name7</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=true>Name5</li>

  <!-- startDate > currentDate -->
  <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
  <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
  <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>

  <!-- startDate < currentDate -->
  <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
  <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

我试过了，但不包括 inplay 参数，而且顺序也不完全正确

var list = $("ul > li");
var target = new Date().getTime();
var sortByStartTime = function (a, b) {
    var ret = 0;
    var startDateA = $(a).data("startdate");
    var startDateB = $(b).data("startdate");
    var dateA = startDateA.split(" ")[0].split("-");
    var timeA = startDateA.split(" ")[1].split(":");
    var dateB = startDateB.split(" ")[0].split("-");
    var timeB = startDateB.split(" ")[1].split(":");
    startDateA = new Date(dateA[2], dateA[1] - 1, dateA[0], timeA[0], timeA[1]);
    startDateB = new Date(dateB[2], dateB[1] - 1, dateB[0], timeB[0], timeB[1]);
    var dA = Math.abs(startDateA.getTime() - target);
    var dB = Math.abs(startDateB.getTime() - target);
    if (dA < dB) {
        ret = -1;
    } else if (dA > dB) {
        ret = 1;
    }  else {
        ret = 0;
    }
    return ret;
};

list.sort(sortByStartTime);

for (var i = 0; i < list.length; i = i + 1) {
    list[i].parentNode.appendChild(list[i]);
}

基本上，列表应该按最近的开始日期时间(相对于当前日期时间)到最远的顺序排列，但如果有一些内容，它们应该位于列表的顶部，按最近的开始日期时间(相对于当前日期时间)排列时间)到最远。我希望我解释得足够清楚。 感谢您提供任何帮助，谢谢。

最佳答案

排序逻辑:

  1. 根据数据输入真假排序，使用数字简化排序逻辑(降序排序)
  2. 如果差异相反 零的一侧先保持正值，后保持负值 (降序排列)
  3. 如果与当前时间不同 因为两个日期都在 0 的同一侧，按它们的绝对值排序 值(升序排列)

var list = Array.from(document.querySelectorAll("ul > li"));
var target = new Date('09-04-2019 15:15');
var boolValue = { true: 1, false: 0 };
var sortByStartTime = function (a, b) {
    var diffA = new Date(a.dataset.startdate) - target;
    var diffB = new Date(b.dataset.startdate) - target;
    var inplayA = boolValue[a.dataset.inplay];
    var inplayB = boolValue[b.dataset.inplay];
    return inplayB - inplayA || (
        diffA < 0 === diffB < 0 ? Math.abs(diffA) - Math.abs(diffB) : diffB - diffA
    );
};

list.sort(sortByStartTime);

for (var i = 0; i < list.length; i = i + 1) {
    list[i].parentNode.appendChild(list[i]);
}
<ul>
  <li data-startDate="09-04-2019 15:00" data-inplay=false>Name1</li>
  <li data-startDate="09-04-2019 15:30" data-inplay=false>Name2</li>
  <li data-startDate="09-04-2019 15:20" data-inplay=false>Name3</li>
  <li data-startDate="09-04-2019 16:00" data-inplay=false>Name4</li>
  <li data-startDate="09-04-2019 15:00" data-inplay=true> Name5</li>
  <li data-startDate="09-04-2019 15:10" data-inplay=false>Name6</li>
  <li data-startDate="09-04-2019 15:05" data-inplay=true> Name7</li>
  <li data-startDate="08-04-2019 12:05" data-inplay=false>Name8</li>
</ul>

PS: replace new Date('09-04-2019 15:15'); with new Date(); to get what you wanted. I hardcoded the date to show that results are as per your requirement.

关于javascript 按最近的开始日期时间排序以显示最远的距离和另一个属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55587709/

javascript按datadata-startDatestartDatesorting

有关javascript 按最近的开始日期时间排序以显示最远的距离和另一个属性的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  5. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  6. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  7. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  8. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  9. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  10. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

随机推荐