0

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

<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 进行排序。

4

1 回答 1

2

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