41

I want a javascript way to move an element one place up or down in the dom tree within a particular known parent using javascript (or jquery is ok), but i want the script to know when an element is the first or last element within the parent and not be moved. for example, if i have the following ...

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

on click of a button, i want to pass a known id (let's say div_2) and move it up to the position above it, swapping its position with the element that was previously before it (in this case div_1). The ids of the elements don't have to change, and their new position doesn't need to be known, at least not unless they are moved again.

0

4 Answers 4

60

With jQuery:

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);
1
  • 1
    thanks! i can then use next() to move it down, and then remove() to remove the old item Jan 21, 2016 at 1:59
59

Move element "up":

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

Move element "down":

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>

1
  • 2
    Plus 1 for vanilla JavaScript
    – Robin
    Jun 24, 2021 at 23:12
4

You can use JQuery's built in .index() method to get the location of a child element and get the .length value form a parent element to find out the number of elements.

If index comes back 0, it is the first element, if the index comes back parent element length -1 then you know it is the last element.

For moving the elements them self you can use .insertBefore and .prev to move an element up.

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

For moving an elemetn down then you can use insertAfter and .next

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

Get all the child div with parent div id (#parent_div) using $.each function of jQuery. suppose you want to swap div3 with div2, then index of div3 will be 2. use $(#div_3).insertBefore(#div_2)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.