Ordering div elements based on properties of associated objects inside an array

Question

I have an array of objects box[], and a div element for each of these objects with class .box. Each object has a numeric property box[].id, which is used to identify the corresponding div element which has the same id attribute. I want to create a function to order the div elements based on other properties of their related objects, I think it would be something like this using JavaScript and jQuery:

// Call my order function based on property1 for example.    
sortBox("property1");    

function sortBox(property) {
    var order;
    $(".box").each(function (i) {
        // Gets the property on which to sort for each div
        order = box[this.id][property];
        //////////////////////
        //.......????.......//
        //////////////////////
    });
}

This gets the property for each div to do the sorting but I have no idea what to do after to order the divs based on that property and update the Html. Please help, what is the proper way to do this? Any ideas, examples, suggestions? Thanks in advance.

sjngm · Accepted Answer · 2011-01-14 17:26:02Z

2

You should look into the sort()-function, e.g.:

var boxes = $(".box");
// convert boxes to a regular array
boxes.sort(sortFunc);

function sortFunc(div1, div2) {
     // please note that the result is in descending order (see below)
     // if div1 > div2 return -1
     // if div1 < div2 return 1
     // if div1 == div2 return 0
}

Then you can run a loop to insert each DIV as the first element before the first child of the parent

boxes.each(
    function(el) {
        el.parentNode.insertBefore(el, el.parentNode.firstChild);
    });

Because the boxes are sorted descending you end up with the "smallest" element in the first position.

This might contain syntax errors!

answered Jan 14, 2011 at 17:26

sjngm

13k16 gold badges90 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fibericon Over a year ago

I was going to post something using the .sort() function, but you beat me to it. The syntax looks fine, by the way.

VerizonW Over a year ago

But by doing it this way it is not sorted by the properties of the associated object to that div but by the contents of it, right?

sjngm Over a year ago

@VerizonW: I don't know exactly what you want to compare, so I lined out how you could do this. Whatever you want to compare goes into sortFunc(). AFAIK it's not possible to pass additional parameters to the sorting function, which is why you would need to use e.g. global variables if you want to do this.

Josiah Ruddell · Accepted Answer · 2011-01-14 17:32:27Z

1

I would go the other direction.

Convert box to an array.
Use the built in array.sort
clear the container and append the elements in order from sorted array.

var boxArray = [];
for (var b in box)
    boxArray.push({id: b, box: b});

boxArray = boxArray.sort(function (a, b) {
    if (a.box.prop1 < b.box.prop1)
        return -1;
    else if (a.box.prop1 > b.box.prop1)
        return 1;
    return 0;
});

Box array is now sorted and you can clone/copy elements into a new container.

edited Jan 14, 2011 at 17:32

answered Jan 14, 2011 at 17:24

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

VerizonW Over a year ago

Actually box[] is already an array of objects so maybe I don't need to create a new array ands just sort the existing one.

VerizonW · Accepted Answer · 2011-01-17 02:38:37Z

0

Ok, I came up with this:

// the prop param is the object property used to sort the array of objects.
function sortBox(prop) {
    box.sort(function (a, b) {
        if (a[prop] < b[prop]) {
            return -1;
        } else if (a[prop] > b[prop]) {
            return 1;
        }
        return 0;
    });
}

Then I can call my sortBox function to sort my box[] array based on any of the properties of its objects. Then I delete the existing <div> elements with jQuery empty() and create them again with the array sorted:

$("#boxcontainer").empty();

// the html property specifies the <div> html
for (var i = 0, len = box.length; i < len; i++) {
    $("#boxcontainer").append(box[i].html);
}

answered Jan 17, 2011 at 2:38

VerizonW

1,8355 gold badges22 silver badges28 bronze badges

1 Comment

Josiah Ruddell Over a year ago

:) looks an awful lot like my solution.

Collectives™ on Stack Overflow

Ordering div elements based on properties of associated objects inside an array

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related