javascript - 根据子元素值对列表项进行排序

Question

有多个 li 标签。在这些 li 标签内有一个 span 元素，其值为月份。我想要的是使用 li 标签内 span 元素的 month 文本值对 li 标签进行排序.

例如；如果有 li 标签，并且在 li 标签内有一个 span，其 innerHTML 为 December ，此 li 标记应位于列表底部，因为 12 月 是一年中的最后一个月。

下面是html代码。

<ul class="timeline-items">
                <h2 class="fables-second-background-color date-circle">2018</h2>
                <li class="is-hidden timeline-item">
                    <span class="gallery-mlti-date">MAY</span>
                </li>
                <li class="is-hidden timeline-item">
                    <span class="gallery-mlti-date">NOV</span>
                </li>
                <li class="is-hidden timeline-item">
                    <span class="gallery-mlti-date">SEP</span>
                </li>
                <li class="is-hidden timeline-item">
                    <span class="gallery-mlti-date">NOV</span>
                </li>
            </ul>

      <script>
      const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
     </script>

我已经尝试了很多方法来使用 javascript 来实现此目的，但我的 logix 已经用完了。欢迎询问更多详情。

Answer 1

一种方法是使用实​​际日期和 Date() 构造函数。通过这种方式，您可以评估彼此的确切日期并在排序函数中使用它们。您已经有了月份，但在这种情况下，年份也是构建有效日期所必需的。最低要求是一年。在本例中，我们需要年份和月份。

我使用过 HTML5 <time> 使您的约会更加语义化的元素。它有一个datetime屏幕阅读器和搜索引擎可以读取哪些属性来了解日期，例如 NOV是。我们可以使用 datetime 中的值属性以使用 Date() 创建新日期构造函数。

首先选择所有 <time> 元素及用途 Array.from() 或扩展语法[...elements]从 querySelectorAll 创建一个数组结果。这是使用 sort 所必需的所有数组都可用的方法。

在 sort() 方法比较datetime中的值属性彼此之间创建顺序。现在顺序已经设置，我们希望将其应用到文档中。再次循环遍历日期并使用 order Flexbox 的属性可根据已排序数组的索引设置正确的顺序。

您还需要添加 display: flex;和flex-direction: column在您的<ul>上元素来制作 <li>元素与 order 一起使用属性。

如果我没有说清楚或者您还有其他问题，请告诉我。

// Get the <time> elements and put them in an array.
const dates = Array.from(document.querySelectorAll('.gallery-mlti-date'));

// Sort by date. From January to December.
dates.sort((a, b) => new Date(a.dateTime) - new Date(b.dateTime));

// Set order of list items by index of sorted list.
dates.forEach((date, index) => date.parentElement.style.order = index);

.timeline-items {
  display: flex;
  flex-direction: column;
}

<h2 class="fables-second-background-color date-circle">2018</h2>
<ul class="timeline-items">
  <li class="is-hidden timeline-item">
    <time datetime="2020-05" class="gallery-mlti-date">MAY</time>
  </li>
  <li class="is-hidden timeline-item">
    <time datetime="2020-11" class="gallery-mlti-date">NOV</time>
  </li>
  <li class="is-hidden timeline-item">
    <time datetime="2020-09" class="gallery-mlti-date">SEP</time>
  </li>
  <li class="is-hidden timeline-item">
    <time datetime="2020-11" class="gallery-mlti-date">NOV</time>
  </li>
</ul>