Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

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)

рони 09.12.2017 10:24
arooly,
не могу помочь, нужен код, смотрите пост №9, или ждите для того, кому достаточно ваших данных.

arooly 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 происходила сортировка.
Так же ниже прикрепляю картинки которые должны придать ясности.

arooly 09.12.2017 12:33
https://ibb.co/fJprub

рони 09.12.2017 13:14
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)
        })
    })
};

arooly 09.12.2017 14:12
вставляю вот так 
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

рони 09.12.2017 14:45
arooly,
....!!!
sortElUp.onclick = function {
compare(".parseDataPRGREEN")

}

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


Часовой пояс GMT +3, время: 06:16.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице