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

Question

我想用 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>

所以在我的例子中应该是:Mary - John - Alice(或者不太正确，但可以接受，可能是:Alice - Mary - John)。

我已经尝试过

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

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

或者，我可以在 li 元素内添加一个时间属性，但是 HTML 污染越少越好，因为这样的属性实际上并没有添加任何语义。有什么建议可以通过尽可能少的 HTML 修改来对列表进行排序吗？我可能想要的是让 tinysort 意识到我想要对 li 进行排序，而不是对 bubble 进行排序。

Answer 1

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

这是一个 fiddle :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'
  });
});