Déplacer un élément vers le haut ou vers le bas dans l'arbre dom avec javascript

Je veux une façon javascript pour déplacer un élément d'un lieu vers le haut ou vers le bas dans l'arborescence dom au sein d'un parent connu à l'aide de javascript (jquery est ok), mais je veux que le script pour savoir quand un élément est le premier ou le dernier élément à l'intérieur de la mère et de ne pas être déplacé. par exemple, si j'ai le texte suivant ...

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

sur le clic d'un bouton, je veux passer un connu id (disons div_2) et le déplacer jusqu'à la position au-dessus d'elle, échange sa position avec l'élément qui a été précédemment avant (dans ce cas div_1). Les id des éléments n'avez pas à changer, et leur nouvelle position n'a pas besoin d'être connue, au moins pas moins qu'ils sont à nouveau déplacé.

source d'informationauteur Peter Cullen | 2016-01-21

  1. 24

    Avec jQuery:

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

    Obtenir tous les enfants div avec les parents div id (#parent_div) à l'aide de $.chaque fonction de jQuery.
    supposons que vous voulez échanger div3 avec div2, alors l'index de div3 sera de 2. utiliser $(#div_3).insertBefore(#div_2)

  3. 0

    Vous pouvez utiliser JQuery est intégré dans .index() méthode pour obtenir l'emplacement d'un élément enfant et obtenir le .length de valeur d'un élément parent pour trouver le nombre d'éléments.

    Si index revient à 0, c'est le premier élément, si la index revient parent longueur de l'élément de -1, alors vous savez que c'est le dernier élément.

    Pour déplacer les éléments de leur auto, vous pouvez utiliser .insertBefore et .prev pour déplacer un élément vers le haut.

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

    Pour le déplacement d'un elemetn vers le bas, puis vous pouvez utiliser insertAfter et .next 

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