Jquery - 按子项的 innerHTML 对 DIV 进行排序

Question

我的 html 看起来像这样:

<div id="sortThis">
<div id="1">Price:<span class="price">20</span><span class="style">blue</span></div>
<div id="2">Price:<span class="price">23</span><span class="style">red</span></div>
<div id="3">Price:<span class="price">10</span><span class="style">red</span></div>
<div id="4">Price:<span class="price">29</span><span class="style">green</span></div>
<div id="5">Price:<span class="price">35</span><span class="style">blue</span></div>
</div>

我希望能够按 .price 或 .style 排序

我怀疑这篇文章部分回答了我的问题:Sort Divs in Jquery Based on Attribute 'data-sort'?

这个插件几乎可以满足我的需要(因为它可以处理子属性)，但它似乎没有达到 child 的 innerHTML 的程度:http://tinysort.sjeiti.com/

任何帮助都会受到这个菜鸟的赞赏。

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($('#sortThis'), "div", "span.price");

该函数是参数化的，因此它可以很容易地与其他 div 和不同的排序键重用。

这是一个演示:http://jsfiddle.net/tc5dc/

---

使用tinysort插件

或者，如果您可以从 tinysort 提供的功能中受益插件(有问题提到)，您可以动态扩充您的 div 以适应该插件。

查看此演示:http://jsfiddle.net/6guj9/

在示例中，我们首先将 price 和 style 值添加为 holding div 的数据属性:

var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
    var p = $(this);
    p.attr("data-price", p.find("span.price").text());
    p.attr("data-style", p.find("span.style").text());
});

然后我们可以随意使用 tinysort 对相关属性进行排序。按价格排序很简单:

$("#sortThis>div").tsort({attr:"data-price"});

更改排序顺序和键可以通过简单地传入不同的配置对象来完成。链接的演示显示了一种执行此操作的方法，但您可能会想出一个更好的方案来满足您的需求。