解决 jQuery Isotope 复杂日期格式排序不准确问题-js教程-PHP中文网

解决 jQuery Isotope 复杂日期格式排序不准确问题

本文将指导您如何解决 jQuery Isotope 在处理多种日期格式（如“今天”、“昨天”或特定日期字符串）时排序不准确的问题。核心方案是利用 Isotope 的 getSortData 配置项，结合自定义 JavaScript 日期解析函数，将不同格式的日期统一转换为可比较的数值时间戳，从而实现精确的日期排序。

理解 Isotope 的排序机制与日期格式挑战

jquery isotope 是一个强大的布局和过滤库，它通过 getsortdata 选项来定义元素的排序依据。通常，我们可以直接指定一个选择器（如 .name）来获取文本内容进行排序，或者使用 parseint 等类型转换函数来处理数字。然而，当涉及到日期排序时，情况会变得复杂，尤其是当日期字符串的格式不统一时，例如：

May 25, 2023 (标准日期格式)
Today at 11:22pm (相对日期格式)
Yesterday at 1:15pm (相对日期格式)
April 2 2023 (不同日期分隔符或顺序)

直接对这些混合格式的字符串进行排序会导致结果混乱，因为 Isotope 默认的字符串比较或简单的 parseInt 无法正确理解它们的实际时间顺序。为了解决这个问题，我们需要一个能够将所有这些不同日期格式统一转换为可比较的数值（例如 Unix 时间戳）的方法。Isotope 的 getSortData 允许我们传入一个回调函数，这正是解决此类问题的关键。

创建自定义日期解析函数 parseDate

解决复杂日期格式排序的核心在于编写一个健壮的 JavaScript 函数，该函数能够识别并解析各种日期字符串，并返回一个统一的数值时间戳。以下是一个 parseDate 函数的实现，它尝试处理上述多种日期格式：

/**
 * 尝试解析多种格式的日期字符串，并返回其时间戳。
 * 如果解析失败，则返回 0 或其他默认值。
 * @param {string} s - 待解析的日期字符串。
 * @returns {number} - 日期对应的时间戳（毫秒），如果解析失败则为 0。
 */
let parseDate = function(s) {
    let r = null; // 初始化结果

    // 动态计算今天和昨天的日期字符串，用于替换相对日期描述
    const today = new Date();
    const yesterday = new Date();
    yesterday.setDate(today.getDate() - 1); // 设置为昨天

    // 获取标准格式的日期字符串，例如 "Thu Jun 20 2024"
    const todayDateString = today.toDateString();
    const yesterdayDateString = yesterday.toDateString();

    // 尝试多种格式的字符串
    // 1. 原始字符串
    // 2. 将 "Yesterday at" 替换为昨天的日期字符串，并确保 "am/pm" 前有空格
    // 3. 将 "Today at" 替换为今天的日期字符串，并确保 "am/pm" 前有空格
    let tries = [
        s,
        s.replace(/^Yesterday at/, yesterdayDateString + ', ').replace(/([0-9])(am|pm)$/, '$1 $2'),
        s.replace(/^Today at/, todayDateString + ', ').replace(/([0-9])(am|pm)$/, '$1 $2')
    ];

    for (let i = 0; i <h4>parseDate 函数的工作原理：</h4><ol>
<li>
<strong>动态日期计算</strong>: 函数首先计算出当前“今天”和“昨天”的标准日期字符串，用于替换输入字符串中的相对描述。</li>
<li>
<strong>字符串预处理</strong>: 它构建了一个 tries 数组，包含原始字符串以及经过预处理的字符串。预处理包括：<ul>
<li>将 Yesterday at 替换为 yesterdayDateString + ', '。</li>
<li>将 Today at 替换为 todayDateString + ', '。</li>
<li>
<strong>关键处理</strong>: 将时间部分的 11pm 转换为 11 pm。这是因为 Date.parse() 在某些<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>中可能要求 am/pm 前有一个空格才能正确解析。</li>
</ul>
</li>
<li>
<strong>多重解析尝试</strong>:<ul>
<li>
<strong>Date.parse()</strong>: 首先尝试使用 Date.parse() 方法。如果返回一个有效的数字（非 NaN），则表示解析成功。</li>
<li>
<strong>new Date() 构造函数</strong>: 如果 Date.parse() 失败，则尝试使用 new Date(string) 构造函数。如果构造出的 Date 对象是有效的（!isNaN(dt)），则获取其时间戳 (dt.getTime())。</li>
</ul>
</li>
<li>
<strong>错误处理</strong>: 如果所有尝试都未能成功解析日期，函数将返回 0。在实际应用中，您可以选择返回 Number.MIN_SAFE_INTEGER 或 Number.MAX_SAFE_INTEGER，以便将无法解析的项强制排在排序列表的最前或最后。</li>
<li>
<strong>返回时间戳</strong>: 成功解析后，函数返回对应的毫秒级时间戳。这个时间戳是一个纯数字，Isotope 可以轻松地对其进行数值排序。</li>
</ol><h3>将 parseDate 集成到 Isotope 配置中</h3><p>现在，我们需要将这个自定义的 parseDate 函数应用到 Isotope 的 getSortData 配置中。假设您的 HTML 结构中，日期信息位于一个带有 lastposted 类的 <span> 元素中，或者存储在 data-id 属性中（虽然日期通常不建议存放在 data-id 中，但这里假设其内容是日期字符串）。</span></p><p>原始的 getSortData 配置可能如下：</p><pre class="brush:php;toolbar:false;">getSortData: {
    // ... 其他排序键
    lastposted: '[data-id] parseInt', // 尝试解析 data-id 为整数，但对于日期不适用
    // ...
},

为了使用我们的 parseDate 函数，您需要将 lastposted 的值从选择器字符串更改为回调函数。这个回调函数会接收到当前 Isotope 项的 jQuery 对象作为参数，您可以在其中提取日期字符串并传递给 parseDate。

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

假设日期字符串位于 .lastposted 元素中：

<div class="ml-item" data-category="group-1" data-id="123">
    <span class="lastposted">May 25, 2023</span>
    <!-- ... 其他内容 ... -->
</div>
<div class="ml-item" data-category="group-2" data-id="456">
    <span class="lastposted">Today at 11:22pm</span>
    <!-- ... 其他内容 ... -->
</div>

那么，Isotope 的 getSortData 配置应修改为：

// 初始化 Isotope
var $grid = $('.member-list').isotope({
  itemSelector: '.ml-item',
  layoutMode: 'fitRows',
  fitRows: {
    gutter: 5      
  },
  getSortData: {
    name: '.name',
    faceclaim: '.faceclaim',
    posts: '.posts parseInt',
    group: '[data-category]',
    // 将 lastposted 的值设置为我们的 parseDate 函数
    // 该函数会接收到当前 Isotope 项的 jQuery 对象作为上下文
    lastposted: function( itemElem ) {
        // 从当前项中找到包含日期字符串的元素，并获取其文本内容
        const dateString = $(itemElem).find('.lastposted').text();
        return parseDate(dateString); // 调用自定义解析函数
    }, 
    alias: '.alias'
  },
  sortAscending: {
    name: true,
    posts: false,
    lastposted: true, // true 表示升序（最早的日期在前）
    group: true,
    faceclaim: true,
    alias: true
  },
  filter: function() {
    // ... 过滤逻辑 ...
  }
});

重要提示: 如果您的日期字符串是存储在 data-id 属性中，那么 getSortData 的回调函数内部应相应地修改为：

lastposted: function( itemElem ) {
    const dateString = $(itemElem).attr('data-id'); // 假设 data-id 存储日期字符串
    return parseDate(dateString);
},

请确保 data-id 属性确实包含可解析的日期字符串，否则这种做法可能不合适。通常，日期信息更适合放在独立的 data-date 属性或一个可见的元素中。

注意事项与总结

调试: 在开发阶段，可以在 parseDate 函数中保留 console.log() 语句，以观察每个日期字符串是如何被尝试解析的，以及在哪个步骤成功或失败。这对于调试不规则的日期格式非常有帮助。
性能: 对于包含大量元素的列表，每次排序时都需要调用 parseDate 函数。虽然现代 JavaScript 引擎的性能通常足够，但如果遇到性能瓶颈，可以考虑在数据加载时就预先解析并缓存时间戳，而不是在排序时实时解析。
日期格式的健壮性: parseDate 函数已经尝试处理了几种常见且复杂的日期格式。但如果您的应用中存在更多独特的日期格式，您可能需要进一步扩展 parseDate 函数的逻辑，例如使用正则表达式或更专业的日期解析库（如 Moment.js 或 date-fns）来提高解析的准确性和覆盖范围。
默认值: 当 parseDate 无法解析日期时，返回 0 是一个简单的处理方式。根据业务需求，您可能希望将这些无法解析的项排在列表的最前或最后。

通过上述方法，利用 Isotope getSortData 的回调函数能力，结合自定义的日期解析逻辑，您可以有效地解决 jQuery Isotope 在处理复杂且多样化日期格式时排序不准确的问题，从而为用户提供更准确、更友好的排序体验。