Сортировка html блоков JS?

Question

[Сергей]

Добрый день, есть много (около 500) html Блоков с названиями продуктов, как-то можно отсоритировать их по алфавиту?

<div class="slide">
	<div class="good">
		<img class="lazyload" src="img.jpg">
		<p>Банан</p>
	</div>
</div>
<div class="slide">
	<div class="good">
		<img class="lazyload" src="img.jpg">
		<p>Вишня</p>
	</div>
</div>
<div class="slide">
	<div class="good">
		<img class="lazyload" src="img.jpg">
		<p>Блю Кюрасао</p>
	</div>
</div>
<div class="slide">
	<div class="good">
		<img class="lazyload" src="img.jpg">
		<p>Чай</p>
	</div>
</div>

Comments

[Николай Еремеев]

Добрый день! а какие технологии для разработки вы используете ?

[Сергей]

Николай Еремеев, Добрый день, там нет никаких технологий) просто HTML и чуток нативного JS

Answer 1

[Сергей Соколов]

Собрать все блоки в словарь, где ключ - слово, значение - этот блок.
Ключи отсортировать.
Расставить блоки назад в родителя первого из них.

код JavaScript

function resort(selector) {
	const nodeList = document.querySelectorAll(selector);
  const dict = {};
  const parent = nodeList[0].parentNode;
  nodeList.forEach(node => {
  	const key = node.querySelector('p').innerText;
    dict[key] = node;
    node.parentNode.removeChild(node);
  });
  const keys = Object.keys(dict);
  keys.sort().forEach(k => parent.appendChild(dict[k]));
}

resort('.slide');

Работающий пример:

Comments

[Сергей]

круто, спасибо большое

Answer 2

[hzzzzl]

как эти блоки появляются на странице, из базы данных то есть из массива?
правильнее всего сначала сортировать этот массив, перед выводом в html на страницу

Comments

[Сергей]

не, тупо забиты кодом html, можно их вручную перетасовать, то это наверное весь день нужно потратить

[hzzzzl]

Сергей, да не, как-то так получится
https://codepen.io/anon/pen/qGzxea?editors=1010

[Сергей]

hzzzzl, Ухты, круто, спасибо огромное :-)

Answer 3

[Дмитрий Свиридов]

Подключи любую библиотеку для парсинга HTML, распарси, полученные объекты отсортируй - и преврати их обратно в HTML, чтобы руками не тасовать.

Comments

[Сергей]

Можете посоветовать норм библиотеку? никогда не использовал, не разбираюсь какая лучше

[Дмитрий Свиридов]

Сергей, смотря на чем ты запилишь этот скрипт. Если Питон - бери beautiful soup, если php, попробуй самую простую (на мой взгляд) старую библиотеку phpquery. Это ж тебе надо один раз сделать только - перегонишь в отсортированный вид, пересохранишь свой шаблон и все. Я так понял, что эти 500 элементов у тебя статичны, не добавляются, не меняются - и хранятся просто в шаблоне.

P.s. делать эту сортировку на фронтенде средствами js после загрузки страницы, на мой взгляд, костыль, потому что юзер может замечать, как блок моргает (сортируется и перезаписывается) - нафиг это надо.