Сортировать список HTML с помощью JavaScript - PullRequest
Новая
       87

Сортировать список HTML с помощью JavaScript

14 голосов
/ 12 января 2012

У меня есть набор из трех элементов списка, которые я хотел бы автоматически отображать от высокого до низкого при загрузке страницы. В идеале, используя jquery или javascript. 

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

Каждый элемент списка должен иметь свой собственный идентификатор, потому что у каждого из них есть отдельные фоновые изображения. Числа должны быть текстовыми узлами, чтобы пользователь мог их редактировать.

Ответы [ 11 ]

18 голосов
/ 12 января 2012

Вероятно, это будет самый быстрый способ сделать это, поскольку он не использует jQuery: 

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

Вызовите функцию как: 

sortList(document.getElementsByClassName('list')[0]);

Вы можете отсортировать другие списки таким же образом, и если у вас есть другие элементы на той же странице с классом списка, вы должны дать вашему ul идентификатор и передать его, используя вместо этого.

Пример JSFiddle

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

Поскольку вы упомянули, что хотите, чтобы это происходило на pageLoad, я предполагаю, что вы хотите, чтобы это произошло как можно скорее после того, как ul находится в DOM, что означает, что вы должны добавить функцию sortList в заголовок вашей страницы и использовать это сразу после вашего списка, как это: 

<head>
    ...
    <script type="text/javascript">
        function sortList(ul){
            var new_ul = ul.cloneNode(false);
            var lis = [];
            for(var i = ul.childNodes.length; i--;){
                if(ul.childNodes[i].nodeName === 'LI')
                    lis.push(ul.childNodes[i]);
            }
            lis.sort(function(a, b){
               return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
            });
            for(var i = 0; i < lis.length; i++)
                new_ul.appendChild(lis[i]);
            ul.parentNode.replaceChild(new_ul, ul);
        }
    </script>
</head>
<body>
    ...
    <ul class="list">
        <li id="alpha">32</li>
        <li id="beta">170</li>
        <li id="delta">28</li>
    </ul>
    <script type="text/javascript">
        !function(){
            var uls = document.getElementsByTagName('ul');
            sortList( uls[uls.length - 1] );
        }();
    </script>
    ...
</body>
6 голосов
/ 03 августа 2012

вы можете использовать этот легкий плагин jquery List.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);
5 голосов
/ 12 января 2012

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

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

3 голосов
/ 07 февраля 2012

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

$('.list>li').tsort({attr:'id'});
3 голосов
/ 12 января 2012

Этот код отсортирует этот список, предполагая, что имеется только один .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. Получает родительский объект .list.
  2. Находит все дочерние объекты <li>.
  3. Удаляет все дочерние объекты <li> изDOM, но сохраняет свои данные
  4. Сортирует объекты li с помощью пользовательской функции сортировки
  5. Пользовательская функция сортировки получает HTML-код в теге li и преобразует его в число

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

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

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

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/

1 голос
/ 26 июня 2015

Версия без 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/

1 голос
/ 12 января 2012

Как-то так должно помочь: 

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));
});
1 голос
/ 12 января 2012

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

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

Вот рабочий пример .

0 голосов
/ 12 января 2012

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

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

http://jsfiddle.net/zMmWj/

0 голосов
/ 12 января 2012

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

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/

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

Страница:
...