Упорядочивание элементов div на основе свойств связанных объектов внутри массива

Question

У меня есть массив объектов box[] и элемент div для каждого из этих объектов с классом .box. Каждый объект имеет числовое свойство box[].id, которое используется для идентификации соответствующего элемента div с таким же атрибутом id. Я хочу создать функцию для упорядочения элементов div на основе других свойств их связанных объектов, я думаю, что было бы что-то вроде этого, используя JavaScript и 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];
        //////////////////////
        //.......????.......//
        //////////////////////
    });
}

Это получает свойство для каждого div выполнять сортировку, но я понятия не имею, что делать после того, как упорядочить div на основе этого свойства и обновить Html. Пожалуйста, помогите, как правильно это сделать? Есть идеи, примеры, предложения? Заранее спасибо.

Answer 1

Вам следует обратиться к функции sort(), например:

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
}

Затем вы можете запустить цикл для вставки каждого DIV в качестве первого элемента перед первым дочерним элементом родителя * 1006.*

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

Поскольку boxes отсортированы по убыванию, вы получите «самый маленький» элемент в первой позиции.

Это может содержать синтаксические ошибки!

Answer 2

Я бы пошел в другом направлении.

1. Преобразование box в массив.
2. Используйте встроенный array.sort
3. очистить контейнер и добавить элементы в порядке из отсортированного массива.

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 теперь отсортирован, и вы можете клонировать / копировать элементы в новый контейнер.

Answer 3

Хорошо, я придумал это:

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

Затем я могу вызвать мою функцию sortBox для сортировки массива box[] на основе любых свойств его объектов.Затем я удаляю существующие <div> элементы с помощью jQuery empty () и создаю их снова с отсортированным массивом:

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

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