Jquery перемещение элемента

Подробно о перемещение блока/элемента в jquery

1. Как переместить элементы/блоки в jquery выше
2. Как переместить элементы/блоки в jquery ниже
3. Скачать можно здесь

Скопировать ссылку



Как перемещать элементы/блоки в jquery выше

Для того, чтобы переместить элементы/блоки в jquery вам потребуется:


Конечно же первое - это подключить jquery

Для иллюстрации перемещения блока jquery вам понадобится какой-то html код, в котором будут повторяющиеся строки блоков/элементов.

Вам нужно определиться, какой из блоков/элементов вы собираетесь переместить по дереву Domа, пусть это будет вторая строка - выделим её в красный цвет:

<ul class="l1">

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

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

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

</ul>

Далее вам потребуется код jquery, который переместить наш блок выше, чем он стоит сейчас... поставим его выше первой строки...

Обращаемся к нашему красному элементу:

$(".l1 .red")

Обращаемся к строке, выше которой хотим переместить наш блок/элемент:

$(".l2 .no1")

Перемещаем... нам нужна функция before, точка(соединитель)before + две круглые скобки скобки:

.before()

Слева от before ставим тот элемент выше котрого мы хотим переместить наш блок/элемент.

Справа от before внутри скобок помещаем тот элемент, который перемещаем.

Соберем весь код перемещения блока выше другого блока:

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

Пример перемещения блока выше по html дереву с помощью jquery

Далее разметим и код html и код jquery перемещения блока выше прямо здесь:

Как видим, наше вторая строка выделенная красным цветом переместилась выше первой(указанной в коде строки)

• Первая строка
• Вторая строка
• Третья строка
Скопировать ссылку



Как переместить элементы/блоки в jquery ниже

Для того, чтобы переместить блок/элемент ниже по дереву Dom с помощью jquery вам понадобится:

Абсолютно всё тоже самое, кроме функции, которая переместить ваш блок ниже по дереву

.after()

Сразу перейдем к коду html и коду перемещения блока в jquery^

<ul class="l2">
  <li class="no1"> Первая строка </li>
  <li class="red"> Вторая строка </li>
  <li class="no3"> Третья строка </li>
</ul>
<script>$(".l2 .no3").after($(".l2 .red"));</script>


Пример перемещения блока ниже по html дереву с помощью jquery

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---