使用 Tinysort 按子属性对 HTML 列表进行排序

Sorting HTML list by child attribute with Tinysort

本文关键字：列表 排序 HTML Tinysort 属性 使用      更新时间：2023-09-26

我想使用 Tinysort 使用 LI 元素的第一个TIME元素对此列表进行排序。

<div class="box">
    <ul>
        <li><a href="#">John</a>
            <div class="bubble">
                <p><strong>John</strong></p>
                <p>
                    <time datetime="01/01/1950">01/01/1950</time> -
                    <time datetime="10/02/2005">10/02/2005</time>
                </p>
            </div>
        </li>
        <li><a href="#">Alice</a>
            <div class="bubble">
                <p>Alice</p>
            </div>
        </li>
        <li><a href="#">Mary</a>
            <div class="bubble">
                <p>Mary</p>
                <p>
                    <time datetime="01/02/1920">01/02/1920</time> -
                    <time datetime="01/02/2015">01/02/2015</time>
                </p>
            </div>
        </li>
    </ul>
</div>

所以在我的情况下，它应该说：玛丽 - 约翰 - 爱丽丝（或不太正确，但可以接受，可能是：爱丽丝 - 玛丽 - 约翰）。

我试过了 

tinysort('.box ul>li', {selector:'time',attr:'datetime'});

但它弄乱了我的列表，只对bubble div进行排序，而不是li。此外，任何没有time的元素都会被简单地忽略，因为它不指向 li .

或者，我可以在 li 元素中添加一个 time 属性，但我越不弄脏 HTML 越好，因为这样的属性并没有真正添加任何语义。对列表进行排序的任何建议都尽可能少地修改 HTML ？我想要的可能是让 tinysort 意识到我想对 li s 而不是 bubble s 进行排序。

这里的问题是您尝试排序的属性不是数字，因此它像字符串一样处理。将 Unix 时间戳添加到时间元素或列表元素并对其进行排序。您可以在服务器端或客户端执行此操作。

这里有一个小提琴：https://jsfiddle.net/Sjeiti/o9kv8be2/这是代码（我很懒惰，将时间戳添加到列表元素中，但您可能应该将其添加到时间元素中）：

var listElements = document.querySelectorAll('li');
for (var i = 0, l = listElements.length; i < l; i++) {
  var li = listElements[i],
    time = li.querySelector('time'),
    date = time && new Date(time.getAttribute('datetime'));
  date && li.setAttribute('data-timestamp', date.getTime());
}
document.querySelector('button').addEventListener('click', function() {
  tinysort(listElements, {
    data: 'timestamp'
  });
});
相关文章：