Немного изменить код сортировки

@petyann · Регистрация: 03.03.2021

Студворк — интернет-сервис помощи студентам

Есть данные:

HTML5
1
2
3
4
5
6
    <div class="catitems">
        <div class="catitem" data-power="3">Значение: 3</div>
        <div class="catitem" data-power="5">Значение: 5</div>
        <div class="catitem" data-power="1000">Значение: 1</div>
        <div class="catitem" data-power="2">Значение: 2</div>
    </div>

Есть кнопка

HTML5
1
<button id = "button1" data-sort="-1">Сортировать</button>

Есть код сортировки этих данных по нажатию кнопки:

JavaScript
1
2
3
4
5
6
7
8
9
10
$('#button1').click(function(){
    $(this).data('sort', $(this).data('sort') * -1);
    var listCat = $('.catitem');
    listCat.sort(function(a,b){
        return ($(a).data('price') - $(b).data('price')) * $('#button1').data('sort') ;
    });
    listCat.each(function(idx,itm){
        $('.catitems').append(itm);
    });
});

Как можно сделать так, чтобы эти данные сортировались не по нажатию кнопки, а сразу при загрузке страницы?

@amr-now · 29.06.2021, 04:02

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

Как можно сделать так, чтобы эти данные сортировались не по нажатию кнопки, а сразу при загрузке страницы?

Если все необходимые HTML-элементы уже присутствуют в момент окончания загрузки страницы и функция абсолютно правильная, то так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function button1_click(){
    $('#button1').data('sort', $('#button1').data('sort') * -1);
    var listCat = $('.catitem');
    listCat.sort(function(a,b){
        return ($(a).data('price') - $(b).data('price')) * $('#button1').data('sort') ;
    });
    listCat.each(function(idx,itm){
        $('.catitems').append(itm);
    });
}
 
$(button1_click); // При загрузке страницы
$('#button1').click(button1_click); // Обработчик кнопки

@petyann · 29.06.2021, 11:06 **[ТС]**

Так не сработало. Попробовал сделать так:

JavaScript
1
2
3
4
5
6
7
8
9
10
window.onload = function() {
    $('#button1').data('sort', $('#button1').data('sort') * -1);
    var listCat = $('.catitem');
    listCat.sort(function(a,b){
        return ($(a).data('price') - $(b).data('price')) * $('#button1').data('sort') ;
    });
    listCat.each(function(idx,itm){
        $('.catitems').append(itm);
    });
}

Но получается, что после загрузки страницы происходит автоматически клик по кнопке button1. А можно сделать как-то без использования этой кнопки, чтобы просто скрипт срабатывал?

@amr-now · 29.06.2021, 13:09

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

Но получается, что после загрузки страницы происходит автоматически клик по кнопке button1. А можно сделать как-то без использования этой кнопки, чтобы просто скрипт срабатывал?

Это не клик, это обработчик загрузки страницы.
От кнопки #button1 используется только атрибут data-sort.
Где хотите, там и размещайте правила сортировки. Сейчас они находятся на кнопке #button1, атрибут data-sort.

Добавлено через 41 минуту
Вот состряпал тестовую страницу. Исходный мой скрипт абсолютно работоспособный:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="catitems">
        <div class="catitem" data-price="3">Значение: 3</div>
        <div class="catitem" data-price="5">Значение: 5</div>
        <div class="catitem" data-price="1000">Значение: 1000</div>
        <div class="catitem" data-price="2">Значение: 2</div>
    </div>
    <button id="button1" data-sort="-1">Сортировать</button>
 
    <script>
        function button1_click() {
            $('#button1').data('sort', $('#button1').data('sort') * -1);
            var listCat = $('.catitem');
            listCat.sort(function (a, b) {
                return ($(a).data('price') - $(b).data('price')) * $('#button1').data('sort');
            });
            listCat.each(function (idx, itm) {
                $('.catitems').append(itm);
            });
        }
 
        $(button1_click); // При загрузке страницы
        $('#button1').click(button1_click); // Обработчик кнопки
    </script>
</body>
</html>

Желательно использовать jQuery образца не 2010 года выпуска, а поновее.

Обработчик загрузки страницы для старых версий jQuery:

JavaScript
1
$(document).ready(button1_click); // При загрузке страницы

@petyann · 29.06.2021, 14:00 **[ТС]**

Сообщение от amr-now

Это не клик, это обработчик загрузки страницы.
От кнопки #button1 используется только атрибут data-sort.
Где хотите, там и размещайте правила сортировки. Сейчас они находятся на кнопке #button1, атрибут data-sort.

Большое спасибо. Да, всё работает. А не подскажете, вот получается, что сначала загружаются изначальные данные, а после этого они сортируются. То есть сначала посетитель видит изначальные данные, а через 1-2 секунды отсортированные.
А можно как-то избежать вот этой самой задержки в 1-2 секунды, чтобы сразу было видно уже отсортированные данные?
И вот ещё: если перейти на другую страницу, а потом вернуться назад, то сортировка сбрасывается. А можно как-то сделать так, чтобы она сохранилась?

@amr-now · 29.06.2021, 14:12

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

То есть сначала посетитель видит изначальные данные, а через 1-2 секунды отсортированные.

jQuery придуривается.
Проще сразу сказать скрипту, что мы от него хотим:

JavaScript
1
document.addEventListener("DOMContentLoaded", button1_click);

Тогда страница не моргает.

@petyann · 29.06.2021, 15:36 **[ТС]**

Попробовал этот код и в начало, и в конец скрипта вставить, но всё равно почему-то моргает с задержкой около двух секунд.

@amr-now · 01.07.2021, 08:36

petyann, если все три разных способа обработчика загрузки страницы не устраивают,
то можно сделать ход конем - вообще изначально не записывать на страницу несортированные <div>:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="catitems">
    </div>
    <button id="button1" data-sort="-1">Сортировать</button>
 
    <script>
        var data = [
            [3, "Значение: 3"],
            [5, "Значение: 5"],
            [1000, "Значение: 1000"],
            [2, "Значение: 2"]
        ];
        var listCat = data.map(function (e) { // Массив jQuery-контейнеров для <div>
            return $("<div class=\"catitem\" data-price=\"" + e[0] + "\">" + e[1] + "</div>");
        })
 
        var btn1 = $('#button1');
 
        function button1_click() {
            btn1.data('sort', -btn1.data('sort'));
 
            listCat.sort(function (a, b) {
                return ($(a).data('price') - $(b).data('price')) * btn1.data('sort');
            });
 
            $('.catitems').append(listCat);
        }
 
        // $(button1_click); // При загрузке страницы
        // $(document).ready(button1_click); // При загрузке страницы
        document.addEventListener("DOMContentLoaded", button1_click);
        $('#button1').click(button1_click); // Обработчик кнопки
    </script>
</body>
</html>

Контейнер catitems в первый раз заполнится только при наступлении события DOMContentLoaded.

@petyann · 01.07.2021, 11:26 **[ТС]**

amr-now,

О, вот это отличный вариант! Только не совсем ясно, как заполнить вот эти данные

JavaScript
1
2
3
4
5
6
        var data = [
            [3, "Значение: 3"],
            [5, "Значение: 5"],
            [1000, "Значение: 1000"],
            [2, "Значение: 2"]
        ];

Дело в том, что вот этот код на странице формируется динамически, в зависимости от страницы, на которой мы находимся. Поэтому тут возникает проблема передачи этих данных в var data.

HTML5
1
2
3
4
5
6
    <div class="catitems">
        <div class="catitem" data-price="3">Значение: 3</div>
        <div class="catitem" data-price="5">Значение: 5</div>
        <div class="catitem" data-price="1000">Значение: 1000</div>
        <div class="catitem" data-price="2">Значение: 2</div>
    </div>

@amr-now · 01.07.2021, 17:32

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

Только не совсем ясно, как заполнить вот эти данные

На сервере можно заполнить, как будто обычный HTML:

PHP/HTML
1
2
3
4
5
6
7
8
<script>
        var data = [
            [3, "Значение: 3"],
            [5, "Значение: 5"],
            [1000, "Значение: 1000"],
            [2, "Значение: 2"]
        ];
</script>

Этот кусок вставить в основной HTML, а настоящие скрипты держать например в отдельных файлах.

@petyann · 01.07.2021, 17:50 **[ТС]**

amr-now, да, но ведь заранее все эти значения неизвестны. Вот этот вот кусок кода:

HTML5
1
2
3
4
5
6
    <div class="catitems">
        <div class="catitem" data-price="3">Значение: 3</div>
        <div class="catitem" data-price="5">Значение: 5</div>
        <div class="catitem" data-price="1000">Значение: 1000</div>
        <div class="catitem" data-price="2">Значение: 2</div>
    </div>

он может содержать совершенно различное количество данных (элементов) с совершенно разными значениями, в зависимости от страницы, на которой находится посетитель. Соответственно, и var data каждый для каждой из сотен страниц будет разным. Прописать его отдельно для каждой страницы невозможно, так как все страницы динамические.

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@petyann 0 / 0 / 0 Регистрация: 03.03.2021 Сообщений: 46
	29.06.2021, 15:36 [ТС]
	Попробовал этот код и в начало, и в конец скрипта вставить, но всё равно почему-то моргает с задержкой около двух секунд. 0