Javascript-форум - Сортировка по дочерним элементам на JS или JQUERY

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Сортировка по дочерним элементам на JS или JQUERY (https://javascript.ru/forum/events/71728-sortirovka-po-dochernim-ehlementam-na-js-ili-jquery.html)

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

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

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

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

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

сортировка блоков по значению классов

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>

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

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

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

Не могли бы вы

кто это?

Цитата:

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

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

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

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

Что бы было максимально понятно. Вот есть сайт - 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,
не могу помочь, нужен код, смотрите пост №9, или ждите для того, кому достаточно ваших данных.

Рони, я вас понял. Извиняюсь, что запутал. Сейчас попробуй объяснить так, как вы просите.
вот есть JS:

var loadALL = document.createElement('div'),
    sortElUp = document.createElement('div'),
    sortElDown = document.createElement('div'),
    DelUnTop = document.createElement('div'),
    y = document.createTextNode('Подгрузить');
	
sortElDown.innerHTML = 'Сортировать на ввод'
sortElUp.innerHTML = 'Сортировать на вывод'
DelUnTop.innerHTML = 'Убрать непопулярное'
sortElUp.setAttribute('class','AllBtnSU')
DelUnTop.setAttribute('class','UnTop')
sortElDown.setAttribute('class','AllBtnSD')
loadALL.setAttribute('class','AllBtn')
loadALL.appendChild(y)
$('div.block__header__wrap').after(loadALL)
$('div.AllBtn').wrap('<div class="Button">')
$('div.Button').append(sortElUp)
$('div.Button').append(sortElDown)
$('div.Button').append(DelUnTop)

Этот JS будут через расширение внедрён на сайт и создаст там два нужных div'a:
1 - sortElUp
2 - sortElDown
Далее им присваивается class

sortElUp.setAttribute('class','AllBtnSU')
sortElDown.setAttribute('class','AllBtnSD')

Ниже будет вырезанная часть страницы с материалом, что нужно отсортировать. Отменяю,
что отсортировать нужно .item по критерию .parseDataPRGREEN и .parseDataPRRED.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="items" id="inventory_bot">
		<div class="item" id="12938478918">
			<div class="c">
				<span class="p5"></span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/kbn_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f2">
				<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> 2.77
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=eSports%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-42.49
				</div>
				<div class="parseDataPRRED">
					51.8
				</div>
				<div class="parse-data-price">
					1.77$
				</div>
			</div>
		</div>
		<div class="item" id="12936889139">
			<div class="c">
				<span class="p5"></span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/j9z_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f2">
				<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> 2.76
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=Chroma%20Case%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-41.96
				</div>
				<div class="parseDataPRRED">
					50.4
				</div>
				<div class="parse-data-price">
					1.78$
				</div>
			</div>
		</div>
		<div class="item" id="12939336365">
			<div class="im" style="background-image: url('https://pic.money/jgq_s.jpg?v=16')"></div>
			<div class="r">
				FN <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> 2.74
			</div><svg class="st">
			<use xlink:href="#stattrak-small" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=StatTrak%E2%84%A2%20CZ75-Auto%20|%20Imprint%20(Factory%20New)&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					127.96
				</div>
				<div class="parseDataPRRED">
					-61.7
				</div>
				<div class="parse-data-price">
					6.94$
				</div>
			</div>
		</div>
		<div class="item" id="12938672308|12938547743">
			<div class="c">
				<span class="a">Все</span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/kvs_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f1">
				<span>x</span>2<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> 2.74
			</div>
			<div class="ws">
				<span class="cr">+</span>
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=Chroma%202%20Case%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-41.53
				</div>
				<div class="parseDataPRRED">
					49.31
				</div>
				<div class="parse-data-price">
					1.78$
				</div>
			</div>
		</div>
		<div class="item" id="12939156444">
			<div class="im" style="background-image: url('https://pic.money/k6b_s.jpg?v=16')"></div>
			<div class="r">
				FN <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> 2.35
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=MAC-10%20|%20Fade%20(Factory%20New)&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-36.04
				</div>
				<div class="parseDataPRRED">
					36.5
				</div>
				<div class="parse-data-price">
					1.67$
				</div>
			</div>
		</div>
	</div>
</body>
</html>

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

arooly,
:-?

function compare(c, e) {
    var f = document.querySelectorAll(".items");
    [].forEach.call(f, function(d) {
        [].slice.call(d.querySelectorAll(".item"), 0).sort(function(a, b) {
            a = a.querySelector(c).textContent;
            b = b.querySelector(c).textContent;
            return e ? b - a : a - b
        }).forEach(function(a, b) {
            d.appendChild(a)
        })
    })
};

вставляю вот так

sortElUp.onclick = function compare(c, e) {
    var f = document.querySelectorAll(".items");
    [].forEach.call(f, function(d) {
        [].slice.call(d.querySelectorAll(".item"), 0).sort(function(a, b) {
            a = a.querySelector(c).textContent;
            b = b.querySelector(c).textContent;
            return e ? b - a : a - b
        }).forEach(function(a, b) {
            d.appendChild(a)
        })
    })
};

При нажатии выдает ошибку следующего толка:
Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[object MouseEvent]' is not a valid selector.
https://ibb.co/fiVEVG

arooly,
....!!!

sortElUp.onclick = function {
compare(".parseDataPRGREEN")

}

Извините за столь грубую ошибку! Большое спасибо, что помогли! Очень благодарен!