Отсортировать массив js

411
23 марта 2018, 14:17

Как отсортировать такой массив с эелементами списка по значению по алфавиту?

<li name="Дн026" id="Т_26" class="hood" style="display: none;">20 лет Победы</li>
<li name="Дн025" id="Т_25" class="hood" style="display: none;">Семафорная</li>
<li name="Дн018" id="Т_18" class="hood" style="display: none;">Платонова</li>
<li name="Дн015" id="Т_15" class="hood" style="display: none;">Карла Маркса</li>
<li name="Дн014" id="Т_14" class="hood" style="display: none;">Пастера</li>
<li name="Дн080" id="Т_80" class="hood" style="display: none;">Глинки</li>
Answer 1
  • взять все li из ul
  • отсортировать их по textContent
  • вставить обратно в ul в отсортированном порядке

Пример реализации на базе этого ответа:

var parent = document.querySelector("ul"); 
var elements = parent.querySelectorAll("li"); 
var sortedElements = Array.from(elements).sort(function(a, b) { 
  var c = a.textContent; 
  var d = b.textContent; 
  return c < d ? -1 : c > d ? 1 : 0; 
}); 
for (let element of sortedElements) { 
  parent.appendChild(element); 
}
<ul> 
  <li name="Дн026" id="Т_26" class="hood">20 лет Победы</li> 
  <li name="Дн025" id="Т_25" class="hood">Семафорная</li> 
  <li name="Дн018" id="Т_18" class="hood">Платонова</li> 
  <li name="Дн015" id="Т_15" class="hood">Карла Маркса</li> 
  <li name="Дн014" id="Т_14" class="hood">Пастера</li> 
  <li name="Дн080" id="Т_80" class="hood">Глинки</li> 
</ul>

Answer 2

var cnt = document.getElementById('cnt'); 
var list = document.querySelectorAll('.hood'); 
 
cnt.innerHTML = [].slice.call(list).sort(function(a, b) { 
  return a.textContent > b.textContent ? 1 : -1; 
}).map(function(elm) { 
  return elm.outerHTML; 
}).join('');
<ul id="cnt"> 
  <li name="Дн026" id="Т_26" class="hood">20 лет Победы</li> 
  <li name="Дн025" id="Т_25" class="hood">Семафорная</li> 
  <li name="Дн018" id="Т_18" class="hood">Платонова</li> 
  <li name="Дн015" id="Т_15" class="hood">Карла Маркса</li> 
  <li name="Дн014" id="Т_14" class="hood">Пастера</li> 
  <li name="Дн080" id="Т_80" class="hood">Глинки</li> 
</ul>

Логика вся как в ответе Regent, только покомпактнее и всё содержимое ul сразу.

READ ALSO
Работа method borrowing в JS

Работа method borrowing в JS

Вопрос возникает на счёт данного утверждения: При помощи call можно легко взять метод одного объекта, в том числе встроенного, и вызвать в контексте...

199
Не работает ng-repeat AngularJS

Не работает ng-repeat AngularJS

Почему не работает вывод?

240
Вывод статей в react

Вывод статей в react

Доброго времениТолько начал изучать React

245