Как вывести 4 последних блока div на другую страницу?

Question

AlexandraSvetik @AlexandraSvetik

JavaScript

Как вывести 4 последних блока div на другую страницу?

Добрый день. Помогите пожалуйста.
Допустим есть вот такой код

<div class="grid-container case-page-image">
<div class="grid utility-model">Пример utility-model</div>
<div class="grid industrial-design">Пример industrial-design</div>
<div class="grid copyright">Пример copyright</div>
<div class="grid industrial-design">Пример industrial-design</div>
<div class="grid invention">Пример invention</div>
<div class="grid copyright">Пример copyright</div>
<div class="grid utility-model">Пример utility-model</div>
<div class="grid industrial-design">Пример industrial-design</div>
<div class="grid invention">Пример invention</div>
<div class="grid copyright">Пример copyright</div>
</div>

Как мне вывести 4 первых блока на другую страницу. В интернете искала ответы только как клонить div нашла. Я только что закончила курсы по jquery / javascript опыта работы с таким еще нету. Прошу сильно не ругать)

Вопрос задан более трёх лет назад
195 просмотров

8 комментариев

Подписаться 1 Средний 8 комментариев

smilingcheater @smilingcheater

На другую страницу чего? При печати? На следующий экран при просмотре страницы?

Написано более трёх лет назад
AlexandraSvetik @AlexandraSvetik Автор вопроса

smilingcheater, как новости вывод на главную

Написано более трёх лет назад
smilingcheater @smilingcheater

AlexandraSvetik, вы сейчас только ещё больше всё запутали. Может быть прикрепите тогда хотя бы скриншот как вам надо чтобы было?

Написано более трёх лет назад
WapSter @wapster92 Куратор тега JavaScript

AlexandraSvetik, все равно не особо понятно.

Написано более трёх лет назад
Михаил @notiv-nt

пагинация шоле?

Написано более трёх лет назад
AlexandraSvetik @AlexandraSvetik Автор вопроса

smilingcheater, WapSter, Михаил, Вот скриншоты Главная страница, Страница проектов. Задачу которую мне поставили автоматизировать процесс добавления блоков на главной и в проектах. Т.е при добавлении блоков в проекты чтобы последние 4 также были на главной

Написано более трёх лет назад
Антон Литвиненко @AntonLitvinenko

Ну так это же у вас не верстка. это работа с бекендом.
На примере вородпресса. Есть тип записей Проекты. Для вывода на одной странице всех проектов пишется цикл, который из базы данных выводит все проекты. Допустим задача вывести 4 отдельных проекта гдето на главной. в шаблоне главной страници пишется похожий цикл, только он выводит только 4 записи в той сортировке которая нужна
И ни к верстке ни к jQuery это отношения не имеет

Написано более трёх лет назад
AlexandraSvetik @AlexandraSvetik Автор вопроса

Антон Литвиненко, C дампом блоки на странице не связаны поскольку это не ссылки на страницы а просто блоки добавленные в ручную. Если бы данные были в бд я бы не спрашивала как их вывести по скольку умею

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

AlexandraSvetik @AlexandraSvetik Автор вопроса

не работает
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
<script src="load-case.js"></script>
</head>
<body>
<div class="grid-container case-page-image news-case">
</div>
</body>
</html>

case.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-3.5.1.min.js"></script>
	<script src="load-case.js"></script>
</head>
<body>
  <div class="grid-container case-page-image">
  <div class="grid utility-model">Пример utility-model</div>
  <div class="grid industrial-design">Пример industrial-design</div>
  <div class="grid copyright">Пример copyright</div>
  <div class="grid industrial-design">Пример industrial-design</div>
  <div class="grid invention">Пример invention</div>
  <div class="grid copyright">Пример copyright</div>
  <div class="grid utility-model">Пример utility-model</div>
  <div class="grid industrial-design">Пример industrial-design</div>
  <div class="grid invention">Пример invention</div>
  <div class="grid copyright">Пример copyright</div>
</div>
</body>
</html>

javascript

$( document ).ready(function() {

$arr = $('.grid-container div');
let foDiv = [...$arr.slice(-4, $arr.length)].map(item => item.outerHTML).join(' ');

//сохраняем в localStorage
localStorage.setItem('foDiv', foDiv);

//на след странице вытаскиваем с localStorage html
$('.news-case').text(localStorage.getItem('foDiv'));

});

Написано более трёх лет назад

Tim @Tim-A-2020

AlexandraSvetik, все работает
snippet

Написано более трёх лет назад
AlexandraSvetik @AlexandraSvetik Автор вопроса

Tim, работает только на одной странице мне надо на разных

Написано более трёх лет назад
Tim @Tim-A-2020

AlexandraSvetik, и на разных будет работать, если правильно сделать

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 42 минуты назад
- 23 просмотра
0

ответов
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 4 часа назад
- 73 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 5 часов назад
- 38 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 16 часов назад
- 39 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 22 часа назад
- 52 просмотра
2

ответа
JavaScript

Простой
Почему не правильно срабатывает условие в цикле?
- 1 подписчик
- 23 часа назад
- 90 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Расскажите про паттерны работы с GraphQL?
- 7 подписчиков
- вчера
- 988 просмотров
1

ответ
JavaScript

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- вчера
- 59 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему неправильное время в JavaScript?
- 1 подписчик
- вчера
- 125 просмотров
1

ответ
JavaScript

Простой
Как получить родителя с определенным атрибутом?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Спинтакс шаблон

26 дек. 2024, в 14:40

15000 руб./за проект

С ++ парсер тхт логов

26 дек. 2024, в 14:27

100000 руб./за проект

Создание промо-роликов с использованием ИИ и моушн-дизайна

26 дек. 2024, в 13:56

90000 руб./за проект

На другую страницу чего? При печати? На следующий экран при просмотре страницы?
smilingcheater, как новости вывод на главную
AlexandraSvetik, вы сейчас только ещё больше всё запутали. Может быть прикрепите тогда хотя бы скриншот как вам надо чтобы было?
AlexandraSvetik, все равно не особо понятно.
smilingcheater, WapSter, Михаил, Вот скриншоты Главная страница, Страница проектов. Задачу которую мне поставили автоматизировать процесс добавления блоков на главной и в проектах. Т.е при добавлении блоков в проекты чтобы последние 4 также были на главной
Ну так это же у вас не верстка. это работа с бекендом.
На примере вородпресса. Есть тип записей Проекты. Для вывода на одной странице всех проектов пишется цикл, который из базы данных выводит все проекты. Допустим задача вывести 4 отдельных проекта гдето на главной. в шаблоне главной страници пишется похожий цикл, только он выводит только 4 записи в той сортировке которая нужна
И ни к верстке ни к jQuery это отношения не имеет
Антон Литвиненко, C дампом блоки на странице не связаны поскольку это не ссылки на страницы а просто блоки добавленные в ручную. Если бы данные были в бд я бы не спрашивала как их вывести по скольку умею

Answer 1 · 2020-07-09 13:01:57

Tim @Tim-A-2020

Array.slice(0, 4); //первые 4 блока

Ответ написан более трёх лет назад

4 комментария

Как вывести 4 последних блока div на другую страницу?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт