Сортировка списка на основе атрибута данных (с помощью плагина метаданных jquery)


Мне очень трудно понять, как сортировать список на основе одной из пар ключ / значение в атрибуте данных.

<ul>
    <li data="{name:'Foo', number: '1'}">
        <h3>Foo</h3>
    </li>

    <li data="{name:'Bar', number: '2'}">
        <h3>Bar</h3>
    </li>
</ul>

Вот jQuery. Я устанавливаю метаданные attr и обращаюсь к ним. Все это прекрасно работает.

jQuery.metadata.setType("attr", "data");

$(document).ready(function(){   

    // loop through each list item and get the metadata
    $('ul li').each(function () {  
        console.log($(this).metadata());
        // shows the following - Object {name="Foo", number="1"}
    });

)};

Пример: мне нужно будет сортировать по имени по возрастанию. Может кто-нибудь указать мне правильное направление?

Редактировать:

Вот форма, которую я использую для запуска сортировки:

<form name="filterForm">
    Sort: 
    <select name="sort" size="1">
        <option value="nameAsc" <cfif URL.sort EQ 1>selected="selected"</cfif>>Name A to Z</option>
        <option value="nameDesc" <cfif URL.sort EQ 2>selected="selected"</cfif>>Name Z to A</option>
        <option value="numberAsc" <cfif URL.sort EQ 3>selected="selected"</cfif>>Number 1-10</option>
        <option value="numberDesc" <cfif URL.sort EQ 4>selected="selected"</cfif>>Number 10-1</option>
    </select> 
</form> 

И jquery для обработки изменить событие, но я не уверен, что правильно реализовал код Микаэля Элиассона, потому что я не уверен, где передать значение того, что было выбрано:

$('form[name=filterForm] select').change(function(){

    var sortBy = this.value;

    var arr = []

    // loop through each list item and get the metadata
        $('ul li').each(function () {  
            var meta = $(this).metadata();
            meta.elem = $(this);
            arr.push(meta);
        });

    arr.sort(appendItems());

    function appendItems(){

        //Foreach item append it to the container. The first i arr will then end up in the top
        $.each(arr, function(index, item){
            item.elem.appendTo(item.elem.parent());
        }       

    }


});
1   8   2010-11-23 20:33:07

1 ответ:

Javascript имеет функцию сортировки, которая может принимать функцию в качестве аргумента. Эта функция должна использоваться, когда у вас есть пользовательские сравнения. См. http://www.w3schools.com/jsref/jsref_sort.asp

Так что я бы сделал что-то вроде этого

var arr = []
// loop through each list item and get the metadata
    $('ul li').each(function () {  
        var meta = $(this).metadata();
        meta.elem = $(this);
        arr.push(meta);
    });
 arr.sort(compare);

//Foreach item append it to the container. The first i arr will then end up in the top
$.each(arr, function(index, item){
    item.elem.appendTo(item.elem.parent());
});

EDIT: обновленный синтаксис выше .каждый цикл-исправление синтаксической ошибки

EDIT: Исправлена ошибка в последнем каждом цикле

EDIT2: по запросу Я обновляю с помощью функции сравнения

function compare(a, b){
   return a.name - b.name;
}