CODEWITHSUNDEEP
jqueryarrayssorting
Juan Ignacio
Juan Ignacio

Reputation: 3267

jQuery sorting DIVS part II

In a previous question I asked how to sort divs by 2 parameters: name or value, asc or desc. I wrote all the code with the idead I got and I got all solved but 2 last issues.

This is what I do... To sort the divs, first I concatenate the the value and id and have an array like this: 

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

(I use window. to make sure its in the global scope) The first part is the numeric value I want to sort by and the second the ID of the DIV.

ISSUE 1 is that if I run

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

it doesn't get sorted.

-- To go on with my experiment I used the browser console and sorted the array by hand. Now I have the second issue. The code I was going to use to do the actual sorting doesn't work:

I have

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

and then when I run 

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

Nothing happens, not even an error

Upvotes: 0

Views: 547

Answers (3)

Shawn Chin
Shawn Chin

Reputation: 86894

That looks like a rather roundabout way to sort by two keys. You should be able to that using a standard sort() with a custom sort function.

Here's one way to do it, sorting first with the rel attribute followed by the 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); });

Demo: http://jsfiddle.net/8F9Uv/

Upvotes: 0

Tetaxa
Tetaxa

Reputation: 4403

If you don't need the array for something else, this will sort your .sortable divs and put them inside #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/

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

This is what you need..

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('#')) ));
});

demo at http://jsfiddle.net/Wdybs/1/

Upvotes: 0

Related Questions