javascript - 使用 JavaScript 和/或 TinySort 按子元素的标准对父元素进行排序

Question

我有以下结构的一系列列表项。我正在尝试使用 Tinysort 对有序列表 class="collection-grid editable ui-sortable"的列表项进行排序。排序的标准是下面双星的文本，它是div类collection-item-title的文本。

<div id="collection-items" class="collection-items">
<ol class="collection-grid editable ui-sortable">
<li class="collection-item-container track_play_hilite subscriber-item initial-batch  active editing">
<div class="collection-title-details">
<a href="https://sts9.bandcamp.com/album/20190907" class="item-link">
<div class="collection-item-title">
**2019.09.07 :: Red Rocks Amphitheatre :: Morrison, CO**
</div>
</a>
</div>
</li>
<li class="collection-item-container track_play_hilite subscriber-item initial-batch  active editing">
<div class="collection-title-details">
<a href="https://sts9.bandcamp.com/album/20190906" class="item-link">
<div class="collection-item-title">
**2019.09.06 :: Red Rocks Amphitheatre :: Morrison, CO**
</div>
</a>
</div>
</li>
</ol>
</div>

到目前为止我所拥有的内容如下:

tinysort('ol#collection-grid editable ui-sortable>li',{selector:'div.collection-item-title'});

这似乎不起作用。我对任何可行的方法持开放态度，并且不限于 Tinysort。

Answer 1

我能够使用以下函数对项目进行正确排序。

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
    });
    parent.append(items);
}

sortUsingNestedText($('.collection-grid'), "li", "div.collection-item-title");