Сортировка по дочерним элементам на JS или JQUERY
Вложений: 1
Здравствуйте!
Долго искал, но так и не нашёл способ справиться с проблемой. Очень рассчитываю на вашу помощь! Скажем есть вот такая страничка:
<!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,
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. Очень извиняюсь, что напрягаю! |
| Часовой пояс GMT +3, время: 23:05. |