|
Сортировка DIV на "чистом" JavaScript
Доброго времени суток. Возникла задача сортировки DOM объекта со следующей структурой:
<div id="search"> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Заголовок 1</a></div> </div> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Заголовок 2</a></div> </div> .... </div> Нужна сортировка блоков '.search-element' по заголовкам внутри ссылок. И решение хотелось бы видеть на "чистом" JS. Подскажите, пожалуйста, куда мне копать. |
Цитата:
- брать нужный элемент - брать нужный текст из элемента - уметь пользоваться оператором
if (){}
- вставлять элемент до или после какого-то элемента |
Цитата:
var arr = document.getElementById('search');
var arr_element = arr.getElementsByClassName('search-element');
var sort_str = arr_element[0].getElementsByTagName('div').item(1).textContent);
Ну вот так мы выбираем содержимое, по которому нужно сортировать, правильно понимаю (у меня в переменной для первого элемента содержимое указано для примера) ? А как дальше сортировать по этому содержимому и записать это все в DOM? С операторами я знаком, только вот не могу алгоритм понять такой сортировки |
Цитата:
Цитата:
Цитата:
https://ru.wikipedia.org/wiki/Алгоритм_сортировки |
Пример "взятия" текста
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="search">
<div class="search-element">
<div><a href="..."><img src="..."></a></div>
<div><a href="...">Заголовок 1</a></div>
</div>
<div class="search-element">
<div><a href="..."><img src="..."></a></div>
<div><a href="...">Заголовок 2</a></div>
</div>
....
</div>
<script type='text/javascript'>
var o=document.querySelectorAll('#search > .search-element > div:last-child > a');
for (var i=0; i<o.length; i++) {
alert(o[i].innerHTML);
};
</script>
</body>
</html>
|
Элементы "search-element" это массив элементов "search", то есть хранятся под индексами от 0 до n. Под этими же индексами хранятся и заголовки. Если взять индексы заголовка как свойства объектов, а заголовки их значения, то после сортировки этого объекта его свойства будут указывать индексы элементов "search-element" по которым их нужно выстроить в "search".
|
Цитата:
|
Пробуйте, только вопрос - если это разовая сортировка и если это результат вывода сервера данных полученных из базы, то почему эти данные сразу не отсортированы запросом?
|
Цитата:
|
API этот html-код и выдает или же JSON, по которому вы сами его строите?
|
| Часовой пояс GMT +3, время: 03:23. |
|