Как перенести элемент из одного блока в другой в зависимости от разрешения?

Question

EVGenyK_ch @EVGenyK_ch

JavaScript

Как перенести элемент из одного блока в другой в зависимости от разрешения?

https://jsfiddle.net/donfxs16/7/

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

Комментировать

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

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

Нетология

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

14 месяцев

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

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

11 месяцев

Далее
ProductStar × РБК

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

6 месяцев

Далее

Решения вопроса 1

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

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

Можешь подсказать почему блок не удаляется при переносе?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>
    .area{
  display: flex;
  flex-flow:row wrap;
}
.box{
  flex:1;
  min-width:400px;
  border:1px solid #000;
  height: 300px;
  margin:0 10px;
}
.element{
  padding:10px 25px;
  background:#000;
  color:#fff;
  display:inline-block;
}
    </style>
<body>
    <div class="area">
  <div class="box">
    <div class="element">Этот блок  с классом 'element' нужно перенести, допустим при разрешении 500px</div>
  </div>
  <div class="box"> нужно перенести в этот бокс</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    <script>
    
        if ($(document).width() < 500) { 
        var e = $('.element').remove();
        $('.box').append(e);
        }
    
    </script>
</body>

</html>

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

noeer @noeer

Можешь подсказать почему блок не удаляется при переносе?

Потому, что у вас на странице 2 блока с class="box"
Используйте уникальный селектор.

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

noeer, аааа, да, точно, спасибо

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

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

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

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

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

JavaScript

+2 ещё

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

ответов
JavaScript

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

ответ
JavaScript

+1 ещё

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

ответа
JavaScript

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

ответа
JavaScript

+1 ещё

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

ответа
JavaScript

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

ответа
JavaScript

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

ответ
JavaScript

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

ответа
JavaScript

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

ответ
JavaScript

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

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

Answer 1 · 2019-06-18 23:20:20

В зависимости от ширины экрана

if(screen.width == 500) {
	var e = $('.element').remove();
	$('.box').append(e);
}

Если нужна привязка к ширине окна браузера, то проверяйте document.body.clientWidth

Как перенести элемент из одного блока в другой в зависимости от разрешения?

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

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

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