Как сделать формирование списка в зависимости от класса или значения?

Question

[Jazz75RUS]

Добрый день, есть три полосы списка, сверху вниз:

<li class="1">31</li>
<li class="2">11</li>
<li class="3">16</li>

Каким способом можно реализовать изменение положения полос в зависимости от их значения (или класса), например если в полосе class=3 значение становится 36 то она перемещается (можно при перезагрузке, без аякса) в самый верх, а если в class=1 будет 12 то она становится 2й по счету? Пример готовой реализации очень приветствуется но не обязателен)) Спасибо.
Даже совсем обнаглею...мож кто за пивас сделает?))

Answer 1

[mrtoxa]

var list = document.querySelector('.sort-list');
var sortElem = list.getElementsByTagName('li');
var nEntryArray = Array.prototype.slice.call(sortElem, 0);

nEntryArray.sort(function(a, b) {
  return a.firstChild.nodeValue - b.firstChild.nodeValue
})

while (list.lastChild) {
  list.removeChild(list.lastChild);
}

var sortList = document.createDocumentFragment();
for (i = 0, l = nEntryArray.length; i < l; i++) {
  sortList.appendChild(nEntryArray[i]);
}
list.appendChild(sortList);

<ul class="sort-list">
<li class="l1">31</li>
<li class="l2">11</li>
<li class="l3">16</li>
</ul>

И даже ради примера не называйте классы с цифры. Вообще ничего и никогда не называйте с цифры.

Comments

[Jazz75RUS]

ого, не ожидал тут получить настолько развернутый ответ, с классами да - тупанул, пока не работает, но уверен, что на правильном пути))

[mrtoxa]

А что не работает? codepen.io/mrtoxas/pen/mEkgzp?editors=1010

[Jazz75RUS]

mrtoxa: все все, это я видимо косячнул когда порядок сортировки хотел поменять) Большое спасибо, скиньте телефончик, отправлю мини-благодарность на пиво так сказать)))

[mrtoxa]

Jazz75RUS: Да ладно, выпейте его вечерком за мое здоровье :D

[Jazz75RUS]

mrtoxa: еще раз спасибо, все отлично работает)

Answer 2

[Mr Hobot]

В чем трудности то. Jquery в помощь. Парсите ваш список (вряд-ли там будет только 3 елемента, тогда можно было обойтись одной перестановкой), считываете в массив, сортируете как надо и с этого вот клепатете себе новый список(на месте старого конечно же). С классами так же.