Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
2 / 2 / 0
Регистрация: 28.09.2019
Сообщений: 57

Подгрузка элементов из массива по кнопке

03.04.2021, 21:27. Показов 2886. Ответов 3

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток. Есть массив с html с n-количеством элементов.
Задача: выводить только 6 элементов. По кнопке подгружать ещё 6.
Казалось бы легко, но не могу найти подходящее решение.

Пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wtc_grid" id="datasheets_item">
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class="wtc_item"></div>
          <div class=".............."></div>
</div>
<a id="datasheets_load">load more</a>
У меня есть некоторые наброски, но они не работают. В консоли ошибок нет. Не знаю правильно или нет. Поправьте пожалуйста.
JavaScript
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
function checkLoadMore() {
            var g = [],
            $currentIndex = 0;
            $currentLimit = 6;
            $ListItems = $('#datasheets_item').children('.wtc_item');
            $wrapper = $('#datasheets_item');
            $ListItems.each(function () {
                if ($currentIndex < 6) {
                    $(this).addClass("initially_displayed");
                } else {
                    $(this).addClass("initial_display initially_hidden");
                }
                g.push($(this));
                $currentIndex++;
            })
 
            $("#datasheets_load").on("click", function () {
 
                $currentLimit += $currentIndex;
                for ($currentIndex; $currentIndex < $currentLimit && $currentIndex < $ListItems.length; $currentIndex++) {
                    $wrapper.innerHTML += $ListItems[$currentIndex];
                };
            });
        };
 
        checkLoadMore();
CSS
Code
1
2
3
            .initially_hidden {
                display: none;
            }
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
03.04.2021, 21:27
Ответы с готовыми решениями:

Найти максимальный элемент массива из 5 элементов. Результат вывести по щелчку на кнопке
Найти максимальный элемент массива из 5 элементов. Результат вывести по щелчку на кнопке

Подгрузка элементов
Есть 2 скрипта, которые динамически добавляют html элементы. В первом скрипте, добавляется разметка, в одном из элементов которой есть...

Подгрузка элементов страницы
Дабы удовлетворить гугл хочу сделать следущее 1) Подгрузка элементов на странице 2) Индикатор загрузки как на ютубе Надо что бы...

3
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
04.04.2021, 08:28
Лучший ответ Сообщение было отмечено amr-now как решение

Решение

TheTopMisha, здравствуйте. Вот простейшая добавлялка новых строк. Считаем, что раньше HTML-элементов вообще не было. Можно и Аяксом подгружать, если доделать.
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
<!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="wtc_grid" id="datasheets_item">
    </div>
    <a id="datasheets_load">load more</a>
    <script>
        $("#datasheets_load").click(datasheets_load_click);
 
        // Есть некий массив с данными. Его можно и Аяксом дополнять.
        let data = new Array(20);
        for (let i = 0; i < data.length; i++)
            data[i] = `${String(i).padStart(3, "0")} any string`;
        let currentIndex = 0;
        let step = 6; // Добавлять по 6 элементов
        checkLoadMore(); // Добавить первые 6 элементов
 
        function datasheets_load_click(e) {
            e.preventDefault();
            checkLoadMore();
        }
        function checkLoadMore() {
            let i;
            for (i = currentIndex; i < currentIndex + step; i++) {
                if (data[i] === undefined) { // Данные кончились
                    $("#datasheets_load").hide(); // Скрыть кнопку добавления
                    break; 
                }
                $("#datasheets_item").append(`<div class="wtc_item">${data[i]}</div>`);
            }
            currentIndex = i;
        }
    </script>
</body>
</html>
1
2 / 2 / 0
Регистрация: 28.09.2019
Сообщений: 57
04.04.2021, 14:42  [ТС]
amr-now, спасибо за Ваш ответ.

Я попробовал воспроизвести Ваш код у себя.
Возникает вопрос к строчке
Цитата Сообщение от amr-now Посмотреть сообщение
data[i] = `${String(i).padStart(3, "0")} any string`;

Объясните пожалуйста что это? Моя Visual Studio 2012 не понимает что это. Возможно она не понимает такие кавычки, но я все их исправил. Так же я попытался добавить в массив уже существующие элементы, но выводит непонятные значения. Вот результат:

JavaScript
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
$("#datasheets_load").click(datasheets_load_click);
 
        // Есть некий массив с данными. Его можно и Аяксом дополнять.
        var data = [];
        $('#datasheets_item').children('.wtc_item').each(function () {
            data.push($(this));
        });
        console.log(data);
        for (var i = 0; i < data.length; i++)
        data[i] = '${String(i).padStart(3, "0")} any string';
        var currentIndex = 0;
        var step = 6; // Добавлять по 6 элементов
        checkLoadMore(); // Добавить первые 6 элементов
 
        function datasheets_load_click(e) {
            e.preventDefault();
            checkLoadMore();
        }
        function checkLoadMore() {
            var i;
            for (i = currentIndex; i < currentIndex + step; i++) {
                if (data[i] === undefined) { // Данные кончились
                    $("#datasheets_load").hide(); // Скрыть кнопку добавления
                    break; 
                }
                $("#datasheets_item").append('<div class="wtc_item">${data[i]}</div>');
            }
            currentIndex = i;
        }
console.log выводит (см во вложении)
Миниатюры
Подгрузка элементов из массива по кнопке  
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
15.05.2021, 05:06
Цитата Сообщение от TheTopMisha Посмотреть сообщение
Visual Studio 2012 не понимает что это
Visual Studio 2012 уже давно не подходит для веб-программирования. Как ни прискорбно, но устаревшая среда разработки принципиально не позволяет изучить ничего нового. Даже в C#.

Если позволяет мощность компьютера, то можно установить свежую Visual Studio Community Edition.
Если компьютер слабый, то VS Code.
Справка по кавычкам:
https://developer.mozilla.org/... e_literals
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.05.2021, 05:06
Помогаю со студенческими работами здесь

Подгрузка элементов с файлов
Помогите если можете. как реализовать слияние 10 файлов с от сортированными числами(чисел очень много) в один общий? При этом конечный...

Подгрузка ассоциативного массива из файла
В файле country.php $country = array ( 'AC' =&gt; 'остров Вознесения', 'AD' =&gt; 'Андорра', 'AE' =&gt; 'Объединенные...

Подгрузка нужных элементов на страницу
Здравствуйте. Имеется несколько наборов тегов div. По выбору в select пользователю нужно показывать один из наборов. Сейчас пробую...

Подгрузка элементов через Ajax
Доброго времени суток! Подскажите как сделать подгрузку элементов с помощью кнопку &quot;Загрузить еще&quot; без перезагрузки страницы....

Подгрузка элементов выпадающего списка
На форме есть контрол типа DynamicPanel - все данные из него попадают в таблицу БД после импорта. Одним из элементов панели является...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru