Сортировка списка html с помощью javascript

вы можете использовать этот легкий плагин jQuery список.js причина

1. это легкий [только 3K скрипт]
2. легко реализовать в существующей таблице HTML с помощью класса
3. для поиска, сортировки и фильтрации

HTML-код

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

в JavaScript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);

вы можете попробовать это

var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));

arr.sort(function(a, b) {
    var textA = +$(a).text();
    var textB = +$(b).text();

    if (textA < textB) return -1;
    if (textA > textB) return 1;

    return 0;
});

ul.empty();

$.each(arr, function() {
    ul.append(this);
});

живой пример:http://jsfiddle.net/B7hdx/1

этот код будет сортировать этот список предполагая, что есть только один .list элемент:

function sortList(selector) {
    var parent$ = $(selector);
    parent$.find("li").detach().sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        parent$.append(el);
    });
}

sortList(".list");

вы можете увидеть его работу здесь:http://jsfiddle.net/jfriend00/FjuMB/

чтобы объяснить, как это работает:

1. он получает .перечислите родительский объект.
2. находит все <li> дочерние объекты.
3. он удаляет все <li> дочерние объекты из DOM, но сохраняет свои данные
4. он сортирует объекты li, используя пользовательская функция сортировки
5. пользовательская функция сортировки получает HTML в теге li и преобразует его в число
6. затем, пересекая массив во вновь отсортированном порядке, каждый тег li добавляется обратно к исходному родителю.

в результате, они отображаются в отсортированном порядке.

Edit:

эта улучшенная версия будет даже сортировать несколько объектов списка сразу:

function sortList(selector) {
    $(selector).find("li").sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        $(el).parent().append(el);
    });
}

sortList(".list");

демо: http://jsfiddle.net/jfriend00/RsLwX/

там же этот небольшой плагин jQuery. Что сделало бы ваш вид не более чем:--4-->

$('.list>li').tsort({attr:'id'});

что-то вроде этого должно помочь:

var $parent = $(".list");

$(".list li").sort(function (a, b) {
    return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function () {
    $parent.append($(this));
});

одним из методов может быть сортировка массива (ну, объект jQuery)li элементы и заменить содержимое (с помощью html способ) из ul с отсортированным массивом элементов:

$(".list").html($(".list li").sort(function(a, b) {
     return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}));

здесь пример работающего.

вы можете использовать этот метод:

var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

Проверьте статью здесь: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Edit: есть очень крутой плагин jquery, который делает это:http://tinysort.sjeiti.com/

использование jQuery для справки:

var sortFunction = function(a, b) {
    return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);

for (var i = 0; i < lis.length; i++) {
    $('ul.list').append(lis[i]);
}

Скрипка Ссылке

сортировка коллекции jQuery, как обычный массив, а затем добавить каждый элемент в правильном порядке.

$(".list li").sort(function(a, b) {
    return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}).appendTo('.list');

http://jsfiddle.net/zMmWj/

Non jQuery версия (ванильный javascript)

преимущества: список сортируется на месте, что не уничтожает LI и не удаляет любые события, которые могут быть связаны с ними. Он просто перемешивает вещи вокруг

добавлен идентификатор в UL:

<ul id="myList" class="list">
    <li id="alpha">32</li>
    <li id="beta">170</li>
    <li id="delta">28</li>
</ul>

и ванильный javascript (без jquery)

// Grab a reference to the UL
var container = document.getElementById("myList");

// Gather all the LI's from the container
var contents = container.querySelectorAll("li");

// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents 
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);
}

// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// We'll reverse the array because our shuffle runs backwards
list.reverse();

// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

и доказательство скрипки:https://jsfiddle.net/L27gpnh6/1/