Как вывести 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 опыта работы с таким еще нету. Прошу сильно не ругать)

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

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 дампом блоки на странице не связаны поскольку это не ссылки на страницы а просто блоки добавленные в ручную. Если бы данные были в бд я бы не спрашивала как их вывести по скольку умею

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

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

Ответы на вопрос 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

+2 ещё

Средний
Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?
- 3 подписчика
- 18 мая
- 1461 просмотр
7

ответов
JavaScript

Простой
Почему вместо галереи owl-gallery белое пространство?
- 1 подписчик
- 18 мая
- 60 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Почему окно fancybox по ajax открывается и сразу закрывается?
- 1 подписчик
- 15 мая
- 85 просмотров
2

ответа
JavaScript

Простой
Как упростить/ улучшить получение данных?
- 1 подписчик
- 14 мая
- 142 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 343 просмотра
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- 01 мая
- 179 просмотров
4

ответа
JavaScript

Простой
Почему ничего не происходит — элементы p не добавляются на страницу?
- 1 подписчик
- 01 мая
- 117 просмотров
1

ответ
JavaScript

Простой
Почему при написании цикла for of работает, а при другом цикле не работает?
- 1 подписчик
- 15 апр.
- 400 просмотров
3

ответа
JavaScript

Простой
Почему зависает приложение? Почему не работает функция сортировки?
- 1 подписчик
- 14 апр.
- 253 просмотра
1

ответ
JavaScript

Простой
Почему не работает фильтрация?
- 1 подписчик
- 14 апр.
- 184 просмотра
1

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

На другую страницу чего? При печати? На следующий экран при просмотре страницы?
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 на другую страницу?

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

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

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