Question

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

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

下面是html代码。

December

我已经尝试了许多使用javascript来实现此目的的方法，但是我没有logix。随时询问更多细节。

Answer 1

一种方法是使用实际日期和Date()构造函数。这样，您可以彼此评估确切的日期并将其用于排序功能。您已经有了月份，但是在这种情况下，也需要年份来建立有效日期。最低要求是一年。在这种情况下，我们需要年份和月份。

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

首先选择所有<time>元素，然后使用Array.from()或扩展语法[...elements]从querySelectorAll结果中创建一个数组。必须使用所有阵列中可用的sort方法。

在sort()方法中，将datetime属性中的值相互比较以创建顺序。现在已经设置了订单，我们想将其应用于文档。再次循环浏览日期，并使用Flexbox的order属性基于排序数组的索引来设置正确的顺序。

您还需要在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>

Answer 2

尝试：

<h2 class="fables-second-background-color date-circle">2018</h2>
  
  <ul class="js-timeline-list timeline-items">
      <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>
    function sortList(list) {
        let i = 0;
        const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
        const children = list.children;
      
        for (i = 1; i < children.length; i++) {
            for (let j = i; j > 0; j--) {
                let leftChild = children[j].children[0].innerHTML;
                let rightChild = children[j - 1].children[0].innerHTML;

                if (months.indexOf(leftChild) >= months.indexOf(rightChild)) continue;
                children[j].parentNode.insertBefore(children[j], children[j - 1]);
            }
        }
        
    }
  
    const root = document.querySelector('.js-timeline-list');
    sortList(root)
  </script>

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

2 个答案: