Форум

arooly · #1 (**permalink**) 08.12.2017, 20:38

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

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

<!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 картинка иллюстрирует вид элементов на странице. Нужно чтоб они отобразились в отсортированном виде

void() · #2 (**permalink**) 08.12.2017, 23:26

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

<!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

arooly,
id уникально!!! иначе класс

arooly · #4 (**permalink**) 09.12.2017, 06:56

Спасибо за уделённое время! Интересное решение)

рони · #5 (**permalink**) 09.12.2017, 07:01

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>

arooly · #6 (**permalink**) 09.12.2017, 07:26

Большое спасибо за ответ! Буду разбираться!

arooly · #7 (**permalink**) 09.12.2017, 08:23

Извините за беспокойство. Не могли бы вы объяснить, что делает каждая строчка нашей функции? Хотелось бы понять, чтобы изменить её под себя. Дело в том, что когда адаптируешь под сайт начинает выдавать ошибки.
Возможно это связанно с тем, что в качестве примера указан упрощённый вид кода. Вот код без упрощений:

<!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)
Рассчитываю на вашу помощь.

рони · #8 (**permalink**) 09.12.2017, 09:18

Сообщение от arooly

Не могли бы вы

кто это?

Сообщение от arooly

Вот код без упрощений:

не вижу проблемы, при использовании кода из поста №5

рони · #9 (**permalink**) 09.12.2017, 09:28

arooly,
1. какая структура блоков на самом деле?
2. какие блоки хотите сортировать?
3. критерии сортировки? (вроде понятно)
4. блоки на странице присутствуют?(надеюсь)

arooly · #10 (**permalink**) 09.12.2017, 09:57

Что бы было максимально понятно. Вот есть сайт - 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.
Очень извиняюсь, что напрягаю!

Форум

Справочник

Discord чат

Курсы javascript