Question

在previous question中，我问过如何按两个参数对div进行排序：名称或值，asc或desc。我用我想到的idead编写了所有代码，但是我解决了所有问题，但是最后两个问题。

这就是我做的...为了对div进行排序，首先我连接了value和id，并且有一个这样的数组：

window.sortval = ["76#box1", "71#box122", "125#box4"];

（我使用window。确保它在全局范围内）第一部分是我要排序的数值，第二部分是DIV的ID。

问题1是如果我运行

window.sortval.sort(function(a,b){return a - b})

它没有被排序。

- 为了继续我的实验，我使用了浏览器控制台并手动对数组进行了排序。现在我有第二个问题。我将用于进行实际排序的代码不起作用：

我有

<div id="container">
    <div class="sortable" id="box1" rel="76" data-rel="Name One">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="box122" rel="71" data-rel="Name Two">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="box4" rel="125" data-rel="Name Three">
        [some inside html including a table and divs]
    </div>
</div>

然后当我跑

//get only the id part of each value in the array
var ids = $.map( window.sortname, function(val, i) {
  return val.substring(val.indexOf('#'));
}); 

//sort the DOM
var cont = $('#container');
    $.each(ids, function(i, v) {
    cont.append($(v));
});

什么都没发生，甚至没有错误

Answer 1

如果您不需要其他内容的数组，则会对.sortable div进行排序并将其放入#container内：

var sorted = $(".sortable").sort(function(a,b) {
    return $(a).attr("rel") - $(b).attr("rel");
});
var cont = $("#container");
$.each(sorted,function(i,el) {
    cont.append(el);
});

http://jsfiddle.net/Gx5qw/

Answer 2

这就是你需要的......

window.sortval = ["76#box1", "71#box122", "125#box4"];


// sort based on the numeric value before the id
window.sortval.sort(function(a,b){
   return a.substring(0, a.indexOf('#')) - b.substring(0, b.indexOf('#'));
}); 

//sort the DOM based on the ordered array by using the ids
var cont = $('#container');
    $.each(window.sortval, function(i, v) {
    cont.append($( v.substring(v.indexOf('#')) ));
});

演示http://jsfiddle.net/Wdybs/1/

Answer 3

这看起来像是用两个键排序的相当迂回的方式。您应该能够使用带有自定义排序功能的标准sort()。

以下是一种方法，首先使用rel属性后跟id进行排序：

var cnt = $("#container");
var sorted = $(".sortable", cnt).sort(function(a, b) {
    // (optional), cache vars so we don't keep calling $(...)
    var $a = $(a), $b = $(b);
    var a_id = $a.attr("id"), b_id = $b.attr("id");
    var a_rel = $a.attr("rel"), b_rel = $b.attr("rel");

    if (a_rel == b_rel) { // if rel equal, sort by id
        return (a_id > b_id) ? 1 : (a_id < b_id) ? -1 : 0; // String comparison
    } else {
        return a_rel - b_rel; // Numeric comparison
    }
});

// reinsert in sorted order
$.each(sorted, function(i, e) { cnt.append(e); });

演示：http://jsfiddle.net/8F9Uv/

jQuery排序DIVS第二部分

3 个答案: