jQuery排序DIVS第二部分

在previous question我問如何排序div的2個參數：名稱或值，asc或desc。我用我得到的idead編寫了所有的代碼，我得到了所有解決，但最後2個問題。jQuery排序DIVS第二部分

這是我做的...要的div排序，首先我串聯的價值和ID，並有一個這樣的數組：

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

（我用的窗口，以確保其在。全球範圍）第一部分是我想排序的數字值，第二部分是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)); 
});

什麼也沒有發生，甚至不是一個錯誤

來源

2011-10-21 Juan

這就是你需要的..

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/

來源

2011-10-21 12:43:15

如果您不需要別的東西的數組，這將您.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/

來源

2011-10-21 12:44:03 Tetaxa

這是偉大的，但我不知道爲什麼它不工作按名稱排序時。我將data-rel屬性中的每個DIVs名稱切換到title =「」attr。所以我在做$（a）.attr（'title'） - $（b）.attr（'title'）;並且沒有訂單變化 – Juan

這對我有效'var a = $（「。sortable」）。sort（function（a，b）{return a.title - b.title;}）;'。如果你可以在沒有jQuery的情況下獲得該屬性，那就這樣做。 – Tetaxa

當然，如果你想排序字符串而不是數字，你不能使用'a.title -b.title'，而必須像Shawn所做的那樣。 – Tetaxa

這看起來像一個相當迂迴的方式來按兩個鍵排序。您應該可以使用具有自定義排序功能的標準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/

來源

2011-10-21 13:10:31

jQuery排序DIVS第二部分

回答

相關問題