jQuery 排序 DIVS 第二部分

Question

在 上一个问题中，我询问如何按 2 个参数对 div 进行排序：名称或值、升序或降序。 我用我得到的想法编写了所有代码，除了最后两个问题之外，我所有的问题都得到了解决。

这就是我所做的...为了对 div 进行排序，首先我连接值和 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/