从数组中获取数据属性

Question

我正在尝试修改此排序列表以根据数据属性按最近日期排序。

function sortList(ul) {
   var ul = document.getElementById(ul);
   Array.from(ul.getElementsByTagName("div"))
   .sort((a, b) => a.textContent.localeCompare(b.textContent))
   .forEach(div => ul.appendChild(div));
}

这里是 html

 <div class="grid customer-card-cnt" id="customerlist">
     <div class="col col-sm col-4" data-date="2014-05-10"></div>
     <div class="col col-sm col-4" data-date="2022-05-10"></div>
     <div class="col col-sm col-4" data-date="2021-05-10"></div>
</div>

Answer 1

您似乎使用了错误的属性排序，即 textContent 而不是 data-date 属性的值。我在下面修改了您的示例以显示正确的排序功能。

function sortList(ul) {
  var ul = document.getElementById(ul);
  Array.from(ul.getElementsByTagName("div"))
    .sort((a, b) => b.dataset.date.localeCompare(a.dataset.date))
    .forEach((div) => ul.appendChild(div));
}

这应该产生以下结果 html:

 <div class="grid customer-card-cnt" id="customerlist">
     <div class="col col-sm col-4" data-date="2022-05-10"></div>
     <div class="col col-sm col-4" data-date="2021-05-10"></div>
     <div class="col col-sm col-4" data-date="2014-05-10"></div>
</div>

从数组中获取数据属性

get data attribute from array

javascript

arrays

sorting