Перемещайте элемент в одно место вверх или вниз в дереве dom с помощью javascript

Я хочу, чтобы javascript мог перемещать элемент в одном месте вверх или вниз в дереве dom внутри определенного известного родителя с помощью javascript (или jquery в порядке), но я хочу, чтобы script знал, когда элемент является первым или последний элемент внутри родителя и не перемещаться. например, если у меня есть следующее...

<div id='parent_div'>
    <div id='div_1'></div>
    <div id='div_2'></div>
    <div id='div_3'></div>
</div>

щелкнув по кнопке, я хочу передать известный идентификатор (скажем, div_2) и переместить его в положение над ним, заменив его позицию на элемент, который был ранее перед ним (в этом случае div_1). Иды элементов не должны меняться, и их новое положение не обязательно должно быть известно, по крайней мере, если только они не будут перемещены снова.

Ответ 1

С помощью jQuery:

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);

Ответ 2

Переместите element "вверх":

if(element.previousElementSibling)
  element.parentNode.insertBefore(element, element.previousElementSibling);

Переместите element "вниз":

if(element.nextElementSibling)
  element.parentNode.insertBefore(element.nextElementSibling, element);

function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});

.up, .down        { cursor: pointer; }
.up:after         { content: '△'; }
.up:hover:after   { content: '▲'; }
.down:after       { content: '▽'; }
.down:hover:after { content: '▼'; }

<ul>
  <li>1<span class="up"></span><span class="down"></span></li>
  <li>2<span class="up"></span><span class="down"></span></li>
  <li>3<span class="up"></span><span class="down"></span></li>
  <li>4<span class="up"></span><span class="down"></span></li>
  <li>5<span class="up"></span><span class="down"></span></li>
</ul>

Ответ 3

Получите все дочерние div с родительским div id (#parent_div), используя функцию $.each jQuery. предположим, что вы хотите обменять div3 на div2, тогда индекс div3 будет равен 2. use $(# div_3).insertBefore(# div_2)

Ответ 4

Вы можете использовать JQuery, встроенный в метод .index(), чтобы получить местоположение дочернего элемента и получить значение .length, чтобы сформировать родительский элемент, чтобы узнать количество элементов.

Если index возвращается 0, это первый элемент, если index возвращает длину родительского элемента -1, то вы знаете, что это последний элемент.

Для перемещения элементов они могут использоваться .insertBefore и .prev для перемещения элемента вверх.

    var elm = $("selector_for_the_element");
    elm.insertBefore(elm.prev());

Для перемещения элемета вниз вы можете использовать insertAfter и .next

    var elm = $("selector_for_the_element");
    elm.insertAfter(elm.next());