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

Question

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

<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 元素内添加一个时间属性，但是我弄脏的 HTML 越少越好，因为这样的属性并没有真正添加任何语义。有什么建议可以用尽可能少的 HTML 修改对列表进行排序？我想要的可能是让 tinysort 知道我想对 lis 而不是 bubbles 进行排序。

Answer 1

这里的问题是您尝试排序的属性不是数字，因此它像字符串一样处理。在时间元素或列表元素中添加 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'
  });
});