wake-up-neo.com

Bewegen Sie ein Element mit Javascript um eine Stelle im Dom-Baum nach oben oder unten

Ich möchte eine Javascript-Methode, um ein Element im Dom-Baum innerhalb eines bestimmten bekannten übergeordneten Elements mithilfe von Javascript um eine Stelle nach oben oder unten zu verschieben (oder jquery ist in Ordnung), aber ich möchte, dass das Skript weiß, wann ein Element das erste oder letzte Element innerhalb von ist Elternteil und nicht verschoben werden. zum Beispiel, wenn ich folgendes habe ...

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

auf einen Knopfdruck möchte ich eine bekannte ID übergeben (sagen wir div_2) und sie auf die darüber liegende Position verschieben, wobei sie ihre Position mit dem zuvor davor liegenden Element (in diesem Fall div_1) austauscht. Die IDs der Elemente müssen sich nicht ändern, und ihre neue Position muss nicht bekannt sein, zumindest nicht, wenn sie erneut verschoben werden.

20
Peter Cullen

Mit jQuery:

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

element "nach oben" bewegen:

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

element "nach unten" bewegen:

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>

15
Oriol

Rufen Sie alle untergeordneten div-Werte mit der übergeordneten div-ID (#parent_div) mithilfe der $ .each-Funktion von jQuery ab. Angenommen, Sie möchten div3 mit div2 tauschen, dann wird der Index von div3 2. Verwenden Sie $ (# div_3) .insertBefore (# div_2) 

1
Jagajit Prusty

Sie können die integrierte .index()-Methode von JQuery verwenden, um die Position eines untergeordneten Elements abzurufen und den .length-Wert von einem übergeordneten Element abzurufen, um die Anzahl der Elemente herauszufinden. 

Wenn index auf 0 zurückkommt, ist dies das erste Element. Wenn die index das übergeordnete Element auf Länge -1 zurückgibt, wissen Sie, dass es das letzte Element ist. 

Um die Elemente selbst zu verschieben, können Sie .insertBefore und .prev verwenden, um ein Element nach oben zu verschieben.

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

Um ein Element nach unten zu verschieben, können Sie insertAfter und .next verwenden. 

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