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

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

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

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 136 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 159 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 136 просмотров
3

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Нарисовать проект Площадки для дизайнеров интерьеров

22 нояб. 2024, в 10:19

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

Сделать верстку двух страниц из фигмы

22 нояб. 2024, в 09:58

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

Доделать проект

22 нояб. 2024, в 09:57

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

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

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

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

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