Я немного выхожу из своей глубины, и я надеюсь, что это действительно возможно.
Я хотел бы иметь возможность вызвать функцию, которая сортировала бы все элементы в моем списке по алфавиту.
Я просматривал интерфейс jQuery для сортировки, но это, похоже, не так. Любые мысли?
Вам не нужен jQuery, чтобы сделать это...
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
// Idiot-proof, remove if you want
if(!ul) {
alert("The UL object is null!");
return;
}
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Populate the array
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
// Sort it
vals.sort();
// Sometimes you gotta DESC
if(sortDescending)
vals.reverse();
// Change the list on the page
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
Прост в использовании...
sortUnorderedList("ID_OF_LIST");
Что-то вроде этого:
var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
На этой странице: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
Выше кода сортирует ваш неупорядоченный список с id 'myUL'.
ИЛИ вы можете использовать плагин как TinySort. https://github.com/Sjeiti/TinySort
$(".list li").sort(asc_sort).appendTo('.list');
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
return ($(b).text()) < ($(a).text()) ? 1 : -1;
}
// decending sort
function dec_sort(a, b){
return ($(b).text()) > ($(a).text()) ? 1 : -1;
}
live demo: http://jsbin.com/eculis/876/edit
Чтобы эта работа работала со всеми браузерами, включая Chrome, вам нужно сделать функцию обратного вызова sort() return -1,0 или 1.
function sortUL(selector) {
$(selector).children("li").sort(function(a, b) {
var upA = $(a).text().toUpperCase();
var upB = $(b).text().toUpperCase();
return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);
}
sortUL("ul.mylist");
Если вы используете jQuery, вы можете сделать это:
$(function() {
var $list = $("#list");
$list.children().detach().sort(function(a, b) {
return $(a).text().localeCompare($(b).text());
}).appendTo($list);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li>delta</li>
<li>cat</li>
<li>alpha</li>
<li>cat</li>
<li>beta</li>
<li>gamma</li>
<li>gamma</li>
<li>alpha</li>
<li>cat</li>
<li>delta</li>
<li>bat</li>
<li>cat</li>
</ul>Ответ @SolutionYogi работает как шарм, но кажется, что использование $.each менее прямолинейно и эффективно, чем непосредственное добавление listitems:
var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
mylist.empty().append(listitems);
Я использовал TinySort некоторое время, и он легкий и быстрый. Он используется как плагин jQuery, но теперь он является чистым JS.
Я искал, чтобы сделать это сам, и я не был удовлетворен ни одним из ответов, представленным просто потому, что, я считаю, они являются квадратичным временем, и мне нужно сделать это в списках сотен предметов долго.
Я закончил расширение jquery, и мое решение использует jquery, но его можно легко изменить, чтобы использовать прямой javascript.
Я получаю доступ только к каждому элементу дважды и выполняю одно линейное вычисление, поэтому это должно, я думаю, работать намного быстрее на больших наборах данных, хотя я свободно признаюсь, что я мог ошибаться там:
sortList: function() {
if (!this.is("ul") || !this.length)
return
else {
var getData = function(ul) {
var lis = ul.find('li'),
liData = {
liTexts : []
};
for(var i = 0; i<lis.length; i++){
var key = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""),
attrs = lis[i].attributes;
liData[key] = {},
liData[key]['attrs'] = {},
liData[key]['html'] = $(lis[i]).html();
liData.liTexts.push(key);
for (var j = 0; j < attrs.length; j++) {
liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue;
}
}
return liData;
},
processData = function (obj){
var sortedTexts = obj.liTexts.sort(),
htmlStr = '';
for(var i = 0; i < sortedTexts.length; i++){
var attrsStr = '',
attributes = obj[sortedTexts[i]].attrs;
for(attr in attributes){
var str = attr + "=\'" + attributes[attr] + "\' ";
attrsStr += str;
}
htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>";
}
return htmlStr;
};
this.html(processData(getData(this)));
}
}
Поместите список в массив, используйте JavaScript .sort(), который по умолчанию по алфавиту, затем преобразуйте массив обратно в список.
HTML
<ul id="list">
<li>alpha</li>
<li>gamma</li>
<li>beta</li>
</ul>
JavaScript
function sort(ul) {
var ul = document.getElementById(ul)
var liArr = ul.children
var arr = new Array()
for (var i = 0; i < liArr.length; i++) {
arr.push(liArr[i].textContent)
}
arr.sort()
arr.forEach(function(content, index) {
liArr[index].textContent = content
})
}
sort("list")
JSFiddle Demo https://jsfiddle.net/97oo61nw/
Здесь мы выталкиваем все значения li элементов внутри ul с помощью специального id (который мы предоставили как аргумент функции) массиву arr и сортируем его с помощью sort(), который по умолчанию сортируется по алфавиту. После сортировки массива arr мы перебираем этот массив с помощью метода forEach() и просто заменяем текстовое содержимое всех элементов li на отсортированный контент
улучшение на основе Джитендры Чаухана ответа
$('ul.menu').each(function(){
$(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
почему я считаю это улучшением:
использование each для поддержки работы более чем на одной ул.
важно использовать children('li') вместо ('ul li'), потому что мы хотим обрабатывать только прямые потомки, а не потомки
использование функции стрелки (a,b)=> выглядит лучше (IE не поддерживается)
использование ванили innerText вместо $(a).text() для улучшения скорости
использование ванили localeCompare повышает скорость в случае равных элементов (редко в реальной жизни)
использование appendTo(this) вместо использования другого селектора гарантирует, что даже если селектор ловит более одного уль, все равно ничего не сломается