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 排序

我怀疑这篇文章部分回答了我的问题： 根据属性“data-sort”对 Jquery 中的 Div 进行排序？

这个插件几乎可以满足我的需求（因为它可以处理子属性）但它似乎没有达到子级的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/

在示例中，我们首先添加价格 和 style 值作为持有 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"});

只需传入不同的配置对象即可更改排序顺序和键。链接的演示展示了一种实现此目的的方法，但您可能可以想出更好的方案来满足您的需求。

Answer 2

你可以用 jquery 进行排序，

var mylist = $('ul');
var listitems = mylist.children("li");
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);

---

如果你这样做的话，它会自动按价格排序

var mylist = $('#sortThis');
var listitems = mylist.children("div");
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
    console.log((compA < compB) ? -1 : (compA > compB) ? 1 : 0);
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);

我会看看我是否不能用 if 划出一些东西:)

---

得到类似的东西：

if(sortorder === 'price') {

    var mylist = $('#sortThis');
    var listitems = mylist.children("div");
    listitems.sort(function(a, b) {
       var compA = $(a).children('.price').text().toUpperCase();
       var compB = $(b).children('.price').text().toUpperCase();
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $(mylist).append(listitems);

} else if (sortorder === 'style') {

    var mylist = $('#sortThis');
    var listitems = mylist.children("div");
    listitems.sort(function(a, b) {
       var compA = $(a).children('.style').text().toUpperCase();
       var compB = $(b).children('.style').text().toUpperCase();
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $(mylist).append(listitems);

}

Answer 3

使用我的 jquery 插件 SortContent ：

$('#sortThis').sortContent({asc:true});

您可以使用助手根据您想要的合适内容进行排序。

$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

如果你想颠倒顺序，请将 false 设置为 asc 选项

另请注意，你可以直接选择 div 的子级而不是父级： 这是相同的：

$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

DEMO :

http://jsfiddle.net/abdennour/ytmry/

Answer 4

标记答案的第一部分排序不正确，我使用 1 - 100 之间的数字进行测试，它误解了 10 以下的任何内容。原因是它适用于文本值和 ASCII 代码，而不是实际的数值。

在这里，我在排序之前使用 parseInt() 将文本值转换为整数。

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

那我们就叫它一样

sortUsingNestedText($('#sortThis'), "div", "span.price");

Answer 5

这对我来说是工作。
下面的代码根据价格文本将 div 从低到高缩短。

        var gridItems = $("#sortThis").children("div");

        gridItems.sort(function(a, b) {
            return $('.price',a).text() - $('.price',b).text();
        });

        $("#sortThis").append(gridItems);