Question

我想使用TIME元素的第一个LI元素，使用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 意识到我想要对li而不是bubble进行排序。

Answer 1

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

这是一个小提琴：https://jsfiddle.net/Sjeiti/o9kv8be2/ 这是代码（我很懒，并将时间戳添加到list-element，但你可能应该将它添加到time元素中）：

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'
  });
});

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

1 个答案: