Сортировка 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, по которому вы сами его строите?
|
Выдает JSON
|
А если JSON, то нужно сначала его сортировать, и только затем выводить, это менее затратно, чем потом копаться в DOM. К тому же почитать об API, возможно что его запросы позволяют указывать параметры сортировки и возвращать уже отсортированное.
|
Понял, спасибо за советы. Почитаю еще об API.
|
сортировка div по содержимому js
Feuerman063,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <div id="search"> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Вася</a></div> </div> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Аня</a></div> </div> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Вова</a></div> </div> <div class="search-element"> <div><a href="..."><img src="..."></a></div> <div><a href="...">Боря</a></div> </div> </div> <script type='text/javascript'> var c = document.querySelector("#search"); Array.apply(null,c.querySelectorAll(".search-element")) .sort(function(a, b) { a = a.querySelector("div:last-child > a").text; b = b.querySelector("div:last-child > a").text; return a < b ? -1 : a > b ? 1 : 0 }) .forEach(function(a) { c.appendChild(a) }); </script> </body> </html> вариант на jQuery тут http://javascript.ru/forum/jquery/39...tml#post259543 |
Цитата:
|
рони, а зачем использовать map, если можно заюзать slice?
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Вот еще один пример древнего API: alert('xxxx'.bold()); |
Цитата:
|
Цитата:
|
Цитата:
Array.apply(null,c.querySelectorAll(".search-element")) |
Цитата:
Array.from(c.querySelectorAll('.selector')); |
Цитата:
|
malefikus13,
да ... минимальный html сделайте |
Цитата:
<div id="block"> <div class="negative"> <div><b>Вася</b></div> </div> <div class="pozitive"> <div><b>Аня</b></div> </div> <div class="pozitive"> <div><b>Вова</b></div> </div> <div class="negative"> <div><b>Боря</b></div> </div> </div> |
malefikus13,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .pozitive{ background-color: #FF0000; } .negative{ background-color: #008000; } .test{ background-color: #D2691E; } a{ color: #FFFF00; } </style> </head> <body> <div id="block"> <div class="test"> <div><b>Пётр</b></div> </div> <div class="negative"> <div><b>Вася</b></div> </div> <div class="pozitive"> <div><b>Аня</b></div> </div> <div class="pozitive"> <div><b>Вова</b></div> </div> <div class="negative"> <div><b>Боря</b></div> </div> </div> <script type='text/javascript'> var c = document.querySelector("#block"); Array.apply(null,document.querySelectorAll("#block > div")) .sort(function(a, b) { a = a.classList; a = a.contains('pozitive') ? -1 : a.contains('negative') ? 0 : 1; b = b.classList; b = b.contains('pozitive') ? -1 : b.contains('negative') ? 0 : 1; return a < b ? -1 : a > b ? 1 : 0 }) .forEach(function(a) { c.appendChild(a) }); </script> </body> </html> |
рони, спасибо большое! :):thanks:
|
рони,
а не подскажите еще, для общего развития, что по этой теме следует почитать. Очень хочется поглубже данную тему усвоить. Заранее спасибо Вам! |
malefikus13,
даже незнаю что добавить :) |
Цитата:
|
Часовой пояс GMT +3, время: 20:02. |