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

@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 каждый для каждой из сотен страниц будет разным. Прописать его отдельно для каждой страницы невозможно, так как все страницы динамические.

Новые блоги и статьи Все статьи Все блоги /
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .

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