На первый случай) Может кто-нибудь лучше вариант предложит.
<!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>