Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2017, 20:38
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Сортировка по дочерним элементам на JS или JQUERY
Здравствуйте!
Долго искал, но так и не нашёл способ справиться с проблемой.
Очень рассчитываю на вашу помощь!

Скажем есть вот такая страничка:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
     <div class="items" id="inventory_bot">
	     <div class="item" id="12932097827">
		     <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
	         <div class="parse-btn parse-done">
			     <div class="parseDataPRGREEN">
					-32.47
				 </div>
				 <div class="parseDataPRRED">
					78.16
				 </div>
				 <div class="parse-data-price">
					108.8$
				 </div>
			 </div>
		 </div>
	 </div>
	      <div class="items" id="inventory_bot">
	     <div class="item" id="12932097827">
		     <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
	         <div class="parse-btn parse-done">
			     <div class="parseDataPRGREEN">
					-41.47
				 </div>
				 <div class="parseDataPRRED">
					49.16
				 </div>
				 <div class="parse-data-price">
					108.8$
				 </div>
			 </div>
		 </div>
	 </div>
	      <div class="items" id="inventory_bot">
	     <div class="item" id="12932097827">
		     <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
	         <div class="parse-btn parse-done">
			     <div class="parseDataPRGREEN">
					-12.47
				 </div>
				 <div class="parseDataPRRED">
					11.16
				 </div>
				 <div class="parse-data-price">
					108.8$
				 </div>
			 </div>
		 </div>
	 </div>
</body>
</html>


Необходимо отсортировать элементы('.item') находящиеся в div c #inventory_bot по возрастанию и убыванию. Но критерием сортировки является дочерний div .parseDataPRGREEN (для сортировки по возрастанию) и div .parseDataPRRED (по убыванию соответственно).
Вся сложность для меня как раз в том, что критерий сортировки находится глубоко внутри элемента, что необходимо сортировать.

Буду благодарен любой помощи! Заранее огромное спасибо!

P.S картинка иллюстрирует вид элементов на странице. Нужно чтоб они отобразились в отсортированном виде
Изображения:
Тип файла: jpg view.jpg (8.5 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2017, 23:26
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

На первый случай) Может кто-нибудь лучше вариант предложит.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Сортировка</title>
</head>
<body>
	<button onclick='sortUp()'>По возрастанию</button>
	<button onclick='sortDown()'>По убыванию</button>

	<div class="items" id="inventory_bot">
		<div class="item" id="12932097827">
			<a class="link-btn" href="https://ХХХ" target="_blank">Первый</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-32.47
				</div>
				<div class="parseDataPRRED">
					78.16
				</div>
				<div class="parse-data-price">
					108.8$
				</div>
			</div>
		</div>
		<div class="item" id="12932097827">
			<a class="link-btn" href="https://ХХХ" target="_blank">Второй</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-41.47
				</div>
				<div class="parseDataPRRED">
					49.16
				</div>
				<div class="parse-data-price">
					108.8$
				</div>
			</div>
		</div>
		<div class="item" id="12932097827">
			<a class="link-btn" href="https://ХХХ" target="_blank">Третий</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-12.47
				</div>
				<div class="parseDataPRRED">
					11.16
				</div>
				<div class="parse-data-price">
					108.8$
				</div>
			</div>
		</div>
	</div>

	<script>
	// тут будут храниться распарсенные товары
	var arrItems = [];

	/* формируется массив с товарами */
	window.onload = function(){

		var itemID = document.querySelectorAll('.item');
		var linkBtn = document.querySelectorAll('.link-btn');
		var parseDataPRGREEN = document.querySelectorAll('.parseDataPRGREEN');
		var parseDataPRRED = document.querySelectorAll('.parseDataPRRED');
		var parseDataPrice = document.querySelectorAll('.parse-data-price');

		for(var i = 0; i < itemID.length; i++){
			var temp = {};
			temp.itemID = itemID[i].getAttribute('id');
			temp.linkBtn = linkBtn[i].getAttribute('href');
			temp.linkText = linkBtn[i].innerHTML;
			temp.parseDataPRGREEN = parseDataPRGREEN[i].innerHTML;
			temp.parseDataPRRED = parseDataPRRED[i].innerHTML;
			temp.parseDataPrice = parseDataPrice[i].innerHTML;
			arrItems[arrItems.length] = temp;
		}
	}

/* Сортировка вверх */
	function sortUp(){
		function dataSort(dataA, dataB) {
			return dataA.parseDataPRGREEN - dataB.parseDataPRGREEN;
		}
		arrItems.sort(dataSort);
		render();
	}

/* Сортировка вниз */
	function sortDown(){
		function dataSort(dataA, dataB) {
			return dataA.parseDataPRRED - dataB.parseDataPRRED;
		}
		arrItems.sort(dataSort);
		render();
	}

	/* Вывод в порядке сортировки */
	function render(){
		var wrap = document.querySelector('#inventory_bot');
		wrap.innerHTML = '';
		for(var i = 0; i < arrItems.length; i++){
			wrap.innerHTML += 
			'<div class="item" id="' + arrItems[i].itemID + '">' +
			'<a class="link-btn" href="' + arrItems[i].linkBtn + '" target="_blank">'+ arrItems[i].linkText +'</a>' +
			'<div class="parseDataPRGREEN">' + arrItems[i].parseDataPRGREEN + '</div>' +
			'<div class="parseDataPRRED">' + arrItems[i].parseDataPRRED + '</div>' +
			'<div class="parse-data-price">' + arrItems[i].parseDataPrice + '</div>' +
			'</div>'
		}
	}
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2017, 06:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

arooly,
id уникально!!! иначе класс
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2017, 06:56
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Спасибо за уделённое время! Интересное решение)
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2017, 07:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

сортировка блоков по значению классов
arooly,
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script>
 function compare(c, d) {
    var e = document.querySelectorAll(".items");
    [].slice.call(document.querySelectorAll(".items .item"), 0).sort(function(a, b) {
        a = a.querySelector(c).textContent;
        b = b.querySelector(c).textContent;
        return d ? b - a : a - b
    }).forEach(function(a, b) {
        e[b].appendChild(a)
    })
};
  </script>
</head>
<body>
  <button onclick='compare(".parseDataPRGREEN")'>По возрастанию</button>
  <button onclick='compare(".parseDataPRRED", true)'>По убыванию</button>
  <div class="items" id="inventory_bot">
       <div class="item" id="12932097827">
         <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
           <div class="parse-btn parse-done">
           <div class="parseDataPRGREEN">
          -32.47
         </div>
         <div class="parseDataPRRED">
          78.16
         </div>
         <div class="parse-data-price">
          108.8$
         </div>
       </div>
     </div>
   </div>
        <div class="items" id="inventory_bot">
       <div class="item" id="12932097827">
         <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
           <div class="parse-btn parse-done">
           <div class="parseDataPRGREEN">
          -41.47
         </div>
         <div class="parseDataPRRED">
          49.16
         </div>
         <div class="parse-data-price">
          108.8$
         </div>
       </div>
     </div>
   </div>
        <div class="items" id="inventory_bot">
       <div class="item" id="12932097827">
         <a class="link-btn" href="https://ХХХ" target="_blank">O</a>
           <div class="parse-btn parse-done">
           <div class="parseDataPRGREEN">
          -12.47
         </div>
         <div class="parseDataPRRED">
          11.16
         </div>
         <div class="parse-data-price">
          108.8$
         </div>
       </div>
     </div>
   </div>
</body>
</html>

Последний раз редактировалось рони, 09.12.2017 в 07:05.
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2017, 07:26
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Большое спасибо за ответ! Буду разбираться!
Ответить с цитированием
  #7 (permalink)  
Старый 09.12.2017, 08:23
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Извините за беспокойство. Не могли бы вы объяснить, что делает каждая строчка нашей функции? Хотелось бы понять, чтобы изменить её под себя. Дело в том, что когда адаптируешь под сайт начинает выдавать ошибки.
Возможно это связанно с тем, что в качестве примера указан упрощённый вид кода. Вот код без упрощений:
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="items" id="inventory_bot">
		<div class="item" id="12932097827">
			<div class="r">
				FT <span class="float_item"></span>
			</div>
			<div class="f">
				<span>x</span>1<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 671.33
			</div>
			<a class="link-btn" href="https://%D0%A5%D0%A5%D0%A5" target="_blank">O</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-32.47
				</div>
				<div class="parseDataPRRED">
					78.16
				</div>
				<div class="parse-data-price">
					108.8$
				</div>
			</div>
		</div>
	</div>
</body>
</html>


(в коде без упрощения указал лишь один .item в .items)
Рассчитываю на вашу помощь.

Последний раз редактировалось arooly, 09.12.2017 в 08:25.
Ответить с цитированием
  #8 (permalink)  
Старый 09.12.2017, 09:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от arooly
Не могли бы вы
кто это?
Сообщение от arooly
Вот код без упрощений:
не вижу проблемы, при использовании кода из поста №5
Ответить с цитированием
  #9 (permalink)  
Старый 09.12.2017, 09:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

arooly,
1. какая структура блоков на самом деле?
2. какие блоки хотите сортировать?
3. критерии сортировки? (вроде понятно)
4. блоки на странице присутствуют?(надеюсь)
Ответить с цитированием
  #10 (permalink)  
Старый 09.12.2017, 09:57
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Что бы было максимально понятно. Вот есть сайт - https://cs.money/ru.
Я написал для него расширение, которое создает под каждым элементом с классом .item 2
динамически созданных div'a:
1 - ссылка
<a class="link-btn" href="https://%D0%A5%D0%A5%D0%A5" target="_blank">O</a>

2 - распарсенные данные
<div class="parse-btn parse-done">
	<div class="parseDataPRGREEN">
		-32.47
	</div>
	<div class="parseDataPRRED">
		78.16
	</div>
	<div class="parse-data-price">
		108.8$
	</div>
</div>

Теперь мне нужно испульзуя распарсенные данные, создать функцию сортировки в расширение,
чтобы при нажатии на так же динамически созданный элемент с классом .AllBtnSU происходила сортировка
по возрастанию относительно div.parseDataPRGREEN и при нажатии на элемент с классом .AllBtnSD происходила
сортировка по убыванию относительно div.parseDataPRRED.

Очень надеюсь, что объяснил понятно. Если все же нет - готов уточнить.
Сортировать нужно .item.
Очень извиняюсь, что напрягаю!

Последний раз редактировалось arooly, 09.12.2017 в 10:04.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS / jQuery — почему не получается выполнить программный клик по кнопке? antonium Events/DOM/Window 1 17.07.2018 00:28
Помогите выбрать: JQuery, JSON или AJAX? Apollo9 Библиотеки/Тулкиты/Фреймворки 4 14.04.2017 02:44
Как переопределить js к определенному jquery файлу из двух? OLGANJA Events/DOM/Window 1 05.03.2017 20:00
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00
Игра орел или решка на jquery. В любом случаи выводит вы проиграли! Dimaz jQuery 4 25.12.2009 15:04