Javascript-форум - Показать сообщение отдельно - Сортировка по дочерним элементам на JS или JQUERY

arooly · #12 (**permalink**) 09.12.2017, 12:26

Рони, я вас понял. Извиняюсь, что запутал. Сейчас попробуй объяснить так, как вы просите.
вот есть 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 происходила сортировка.
Так же ниже прикрепляю картинки которые должны придать ясности.