modifier l'ordre divs avec jQuery

<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>

Est possible de changer l'ordre de ce divs avec jQuery? J'aimerais recevoir:

<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>

je peux utiliser uniquement jQuery

LIVE: http://jsfiddle.net/cmVyM/

Je vais faire de ce seul - si le document est prêt.

Sonne comme un travail pour jQuery UI sortable.
Quelques exemples de tri des divs dans cette réponse de la mine: stackoverflow.com/questions/7623819/....
Même que cette question: stackoverflow.com/questions/1363650/...

OriginalL'auteur David Apshid | 2011-10-02

  1. 62

    Sonne comme vous voulez déplacer la première div après le dernier.

    $.fn.insertAfter insère les éléments qui correspondent après le paramètre:

    $(".test.one").insertAfter(".test.three");

    http://jsfiddle.net/rP8EQ/

    Edit: Si vous voulez une solution générale de l'ajout de la première à la dernière, sans avoir recours à l'explicite classes:

    var tests = $('.test');
tests.first().insertAfter(tests.last());
    Cela ne fonctionne pas quand il y a un groupe de divs avec le même nom de classe. Dire 3 divs avec test-one, 3 avec test-two et un autre 3 avec test-three. Toutes les suggestions pour un tel cas?
    Que voulez-vous arriver, pour tous les test-one pour être inséré, après l' test-three, ou l'un spécifique? Si l'ancien qui est déjà le cas, si ce dernier a ensuite choisir de manière plus spécifique les sélecteurs.

    OriginalL'auteur Zirak

  2. 4

    Voici un exemple simple de naviguer avec les boutons.

    HTML

    <ul>
  <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

    Javascript avec JQuery

    $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
})
$('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
})

    Essayer ici: https://jsfiddle.net/nguyenvuloc/vd105gst

    son bel exemple. mais que faire si je souhaite enregistrer les mises à jour ?.

    OriginalL'auteur Loc Nguyen

  3. 2

    Il suffit de ne $('.one').insertAfter('.three');

    OriginalL'auteur deviousdodo

  4. 2
    $("#botao").click(function(){       

$("#a3").insertBefore("#a1");   

}); 

<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>

<div>
<a id="botao">altera</a>
</div>

    Voir: http://jsfiddle.net/GeraldoVilger/2B6FV/

    Juste au cas où cette réponse est trouvée à une date ultérieure, vous pouvez ajouter quelques commentaires de base sur la façon dont cela fonctionne. Merci.

    OriginalL'auteur Geraldo Vilger

  5. 1

    Suffit d'utiliser insertAfter comme la réponse précédente, a déclaré

    http://jsfiddle.net/cmVyM/68/

    var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');

tweede.insertAfter(derde);
eerste.insertAfter(tweede);

    OriginalL'auteur Wannes

  6. 1

    Si vous souhaitez modifier l'ordre du groupe des divs avec le même nom de la classe (par exemple. étant donné ci-dessous):

    <div class="wrapper">
  <span class="text">First Heading</span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span class="text">Second Heading</span>
  <span class="number">2</span>
</div>
<div class="wrapper">
  <span class="text">Third Heading</span>
  <span class="number">3</span>
</div>

    Vous pouvez réorganiser par la suite jQuery code:

    $('.wrapper .number').each(function () {
  $(this).insertBefore($(this).prev('.text'));
});

    https://jsfiddle.net/farhanmae/9th3drvd/

    OriginalL'auteur Farhan Erooth

  7. 0

    Vous pouvez le faire par ce

    var obj = $('.test.two');

obj.after(obj.prev());

    donc, div et un div deux vont changer leur position.

    J'espère que cela peut vous aider.

    OriginalL'auteur Yann叶