| | | | | |
Перемещение блока 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Скачать -
архив
Все скрипты на
одной страницеС вашими куками, что-то не то..., попробуете перезагрузить страницу..