Jquery - 根据子元素的innerHTML对DIV进行排序

Question

Jquery - 根据子元素的innerHTML对DIV进行排序

40

我有一个类似于这样的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'?

这个插件接近于满足我的需求（因为它可以处理子属性），但似乎没有处理子元素的innerHTML：http://tinysort.sjeiti.com/

希望有人能帮助一下这个新手。

- iammatthew2

在HTML中，您不能分配相同的ID。ID应该是不同的。 - Wazy

有点尴尬——DIV现在具有唯一的ID。 - iammatthew2

1

永远不晚澄清：Tinysort可以按子元素的innerHTML进行排序：http://tinysort.sjeiti.com/#subselection - Sjeiti

5个回答

10

你可以通过以下方式使用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);

}

- Marco Johannesen

1

干得好！我做了一个小改动，现在它运行得很好：在IF语句中将“=”更改为“==”。 - iammatthew2

不错！我正在与JQM ListView一起使用它。运行得非常好。 - Adway Lele

1

标记答案的第一部分排序不正确，我使用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");

- CKelly-Cook

1

使用我的 jQuery 插件 SortContent：

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

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

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

如果您想要反转顺序，将asc选项设置为false。

另外需要注意的是，您可以直接选择div的子元素而不是父元素：这是相同的。

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

演示：

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

- Abdennour TOUMI

0

这对我来说是个工作。以下代码根据价格文本将div按低到高的顺序排序。

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

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

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

- Rk dev tech

请在您的答案中添加一些解释，以便其他人可以从中学习。 - Nico Haase

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shawn Chin · Accepted Answer

要直接使用子值进行排序且不使用插件，您可以使用以下代码：

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值添加为承载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"});

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