ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Перемещение блока 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>

Результат:

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 40.8
Название скрипта и номер :Перемещение блока jquery
Пример - Перемещение блока jquery
Скачать - архив
Все скрипты на одной страницеС вашими куками, что-то не то..., попробуете перезагрузить страницу..

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019