Показать сообщение отдельно
  #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>
Ответить с цитированием