Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Перемещение блока jquery

Поддержи проект!!!

Для иллюстрации перемещения блока нам понадобится какой-то блок. В котором, например выберем какой-то элемент, его выделим в красный цвет, чтобы его было видно! К примеру этот элемент будет строчкой номер 2…

1.

<ul class="list l1">

<li class="start no1"> Первая строка </li>

<li class="start red"> Вторая строка </li>

<li class="start no3"> Третья строка </li>

</ul>

<ul class="list l2">

<li class="start no1_1"> Первая строка второго блока </li>

<li class="start no2"> Вторая строка второго блока </li>

<li class="start no3"> Третья строка второго блока </li>

</ul>

В данном случае jquery перемещение работает таким образом: мы должны выделить какой-то элемент$(".l1 .red") , который будем перемещать –
И уже его долины поместить в конструкцию поставить после… $(".l2 .no2").before()

И соберем все вместе:

<script>$(".l2 .no2").before($(".l1 .red"));</script> </div>

Результат:

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока
2.

Если вам требуется переместить объект, код, не до, а после выбранного объекта то вам нужно использовать метод after

<ul class="list l3">

<li class="start no1"> Первая строка </li>

<li class="start red"> Вторая строка </li>

<li class="start no3"> Третья строка </li>

</ul>

<ul class="list l4">

<li class="start no1_1"> Первая строка второго блока </li>

<li class="start no2"> Вторая строка второго блока </li>

<li class="start no3"> Третья строка второго блока </li>

</ul>

<script>$(".l4 .no2").after($(".l3 .red"));</script>

Результат:

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока

Вас может еще заинтересовать список тем : #JS | #JS_JQUERY |
Последняя дата редактирования : 2020-01-24 04:23
Название скрипта :Перемещение блока jquery
Скрипт № 45.9Ссылка на скачивение: Все скрипты на одной странице
Теги:
Перемещение блока jquery

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb