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

我怀疑这篇文章部分回答了我的问题:基于属性'数据排序'在Jquery中排序Div？

这个插件接近于我所需要的(因为它可以处理子属性)但它似乎没有像孩子们的内部HTML那样: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值添加为保持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刮出一些东西

有类似的东西:

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

}