Сортировать список по возрастанию HTML

Каков наилучший способ сортировки этого спискаСортировать список по возрастанию HTML

<ul id="keywords_list" class="list-unstyled list-filter list-filter-singleline"> 
    <li class="keyword_row" id=0> 
     <input class="key_checkbox" id="0" name="keywords[]" type="checkbox" value="25"><a href="#" class="key_link" id="25"><span class="label label-default transition"><span class="keyword" id="0">8</span></span><i class="icn icn-checkmark"></i>Dogs</a> 
    </li> 
    <li class="keyword_row" id=1> 
     <input class="key_checkbox" id="1" name="keywords[]" type="checkbox" value="16"><a href="#" class="key_link" id="16"><span class="label label-default transition"><span class="keyword" id="1">5</span></span><i class="icn icn-checkmark"></i>Cats</a> 
    </li> 
    <li class="keyword_row" id=2> 
     <input class="key_checkbox" id="2" name="keywords[]" type="checkbox" value="3"><a href="#" class="key_link" id="3"><span class="label label-default transition"><span class="keyword" id="2">5</span></span><i class="icn icn-checkmark"></i>Birds</a> 
    </li> 
</ul>

Результат должен быть примерно так:

<ul id="keywords_list" class="list-unstyled list-filter list-filter-singleline"> 
    <li class="keyword_row" id=2> 
     <input class="key_checkbox" id="2" name="keywords[]" type="checkbox" value="3"><a href="#" class="key_link" id="3"><span class="label label-default transition"><span class="keyword" id="2">5</span></span><i class="icn icn-checkmark"></i>Birds</a> 
    </li> 
    <li class="keyword_row" id=1> 
     <input class="key_checkbox" id="1" name="keywords[]" type="checkbox" value="16"><a href="#" class="key_link" id="16"><span class="label label-default transition"><span class="keyword" id="1">5</span></span><i class="icn icn-checkmark"></i>Cats</a> 
    </li>            
    <li class="keyword_row" id=0> 
     <input class="key_checkbox" id="0" name="keywords[]" type="checkbox" value="25"><a href="#" class="key_link" id="25"><span class="label label-default transition"><span class="keyword" id="0">8</span></span><i class="icn icn-checkmark"></i>Dogs</a> 
    </li> 
</ul>

я попробовал некоторые из примеров на StackOverflow, но они не сделали Работа.

источник

2015-12-28 Barba

Итак, вы хотите, чтобы отсортировать элементы списка по их 'ID'? Для этого вам придется использовать JS. – Vucko

Не по их ID, а по значению (Птицы, Кошки, Собаки), в алфавитном порядке – Barba

Вам все равно придется использовать JS. – Vucko

Вы можете использовать JQUERY для сортировки, получая текст li's.

источник: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Он использовать яваскрипт метод Array.sort сортировки элементов в массиве, а затем с помощью JQuery добавить метод(), изменять их порядок в фактического списка элементы.

$("#sort").click(function() { 
    var mylist = $('#keywords_list'); 
    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); 
    }); 
});

JSFIDDLE DEMO

источник

2015-12-28 08:55:35

Эта функция добавляет кучу элементов li в верхней части страницы, где она не должна находиться на странице, когда она помещается в функцию window.onload – Barba

Сортировать список по возрастанию HTML

ответ

Смежные вопросы