Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2015, 10:33
Новичок на форуме
Отправить личное сообщение для Feuerman063 Посмотреть профиль Найти все сообщения от Feuerman063
 
Регистрация: 15.10.2015
Сообщений: 7

Сортировка 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. Подскажите, пожалуйста, куда мне копать.
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2015, 10:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,206

Сообщение от Feuerman063
Подскажите, пожалуйста, куда мне копать
Нужно уметь:
- брать нужный элемент
- брать нужный текст из элемента
- уметь пользоваться оператором
if (){}

- вставлять элемент до или после какого-то элемента
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2015, 11:18
Новичок на форуме
Отправить личное сообщение для Feuerman063 Посмотреть профиль Найти все сообщения от Feuerman063
 
Регистрация: 15.10.2015
Сообщений: 7

Сообщение от ksa Посмотреть сообщение
Нужно уметь:
- брать нужный элемент
- брать нужный текст из элемента
- уметь пользоваться оператором
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?
С операторами я знаком, только вот не могу алгоритм понять такой сортировки
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2015, 11:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,206

Сообщение от Feuerman063
var arr = document.getElementById('search');
var arr_element = arr.getElementsByClassName('element');
var sort_str = arr_element[0].getElementsByTagName('div').item(1).textContent);


Ну вот так мы выбираем содержимое, по которому нужно сортировать
Довольно мудрено, надо сказать...
Сообщение от Feuerman063
А как дальше сортировать по этому содержимому и записать это все в DOM?
Это зависит от метода сортировки...
Сообщение от Feuerman063
вот не могу алгоритм понять такой сортировки
Алгоритмов сортировки достаточно много
https://ru.wikipedia.org/wiki/Алгоритм_сортировки
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2015, 11:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,206

Пример "взятия" текста

<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2015, 11:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Элементы "search-element" это массив элементов "search", то есть хранятся под индексами от 0 до n. Под этими же индексами хранятся и заголовки. Если взять индексы заголовка как свойства объектов, а заголовки их значения, то после сортировки этого объекта его свойства будут указывать индексы элементов "search-element" по которым их нужно выстроить в "search".
Ответить с цитированием
  #7 (permalink)  
Старый 15.10.2015, 11:42
Новичок на форуме
Отправить личное сообщение для Feuerman063 Посмотреть профиль Найти все сообщения от Feuerman063
 
Регистрация: 15.10.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
Элементы "search-element" это массив элементов "search", то есть хранятся под индексами от 0 до n. Под этими же индексами хранятся и заголовки. Если взять индексы заголовка как свойства объектов, а заголовки их значения, то после сортировки этого объекта его свойства будут указывать индексы элементов "search-element" по которым их нужно выстроить в "search".
Спасибо, буду пробовать.
Ответить с цитированием
  #8 (permalink)  
Старый 15.10.2015, 11:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Пробуйте, только вопрос - если это разовая сортировка и если это результат вывода сервера данных полученных из базы, то почему эти данные сразу не отсортированы запросом?
Ответить с цитированием
  #9 (permalink)  
Старый 15.10.2015, 11:49
Новичок на форуме
Отправить личное сообщение для Feuerman063 Посмотреть профиль Найти все сообщения от Feuerman063
 
Регистрация: 15.10.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
Пробуйте, только вопрос - если это разовая сортировка и если это результат вывода сервера данных полученных из базы, то почему эти данные сразу не отсортированы запросом?
Это результаты поиска, полученные через YouTube Api, а именно список видео по конкретному запросу. После вывода этих данных необходимо добавить возможность отсортировать полученные результаты по имени.
Ответить с цитированием
  #10 (permalink)  
Старый 15.10.2015, 11:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

API этот html-код и выдает или же JSON, по которому вы сами его строите?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется javascript ninja для небольшой задачи Achilles_sm Работа 7 01.07.2015 17:33
Бесплатный курс JavaScript (18 уроков)  Bokal Учебные материалы 2 16.11.2014 20:20
Как изменить css одного div при наведении на другой с javascript? InkyThousand Общие вопросы Javascript 7 11.11.2014 16:35
javascript вставки в vrml сцены. Передать событие из броузера Proletariy Javascript под браузер 0 10.05.2011 12:26
JavaScript + div = ? obsessioner Оффтопик 9 09.04.2010 13:58