Échanger deux éléments en jQuery

Hé les gars, je suis en train d'échanger deux éléments à l'aide de flèches haut et bas.

Un JSFiddle solution serait génial! 🙂

Balisage HTML est comme:

<div class="item">
    <div class="content">Some text</div>
    <div class="move">
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
    </div>
</div>

Mon dernier essai a été:

   //el is the clicked one.
jQuery('.move').children().click(function(el){
if(jQuery(el).hasClass('move-down') === true) {
        el = jQuery(el).parent().parent();
        el.prependTo(el.after(el));
      } else {
        el = jQuery(el).parent().parent();
        el.appendTo(el.before(el));
}
});

J'ai essayé beaucoup de différentes façons de modifier des éléments. J'ai essayé avec remplaceavec() avant () (après) mais rien n'a fonctionné.

AVIS:
J'ai déjà écrit une fonction qui affiche les corriger vers le haut /vers le bas div à l'. Donc, la première et la dernière, on peut seulement déplacé dans une direction. C'est déjà résolu. Je ne peux pas utiliser n'importe quel type de existant plugins jquery.

InformationsquelleAutor YeppThat'sMe | 2013-05-30
  1. 5

    Vous pouvez le faire de cette façon - vous besoin de consulter vos e.l'objectif n'est pas de l'div class = déplacer

    jQuery('.move').children().click(function (e) { //<-- argument passed in is the event not an element
    var $div = $(this).closest('.item'); //get closest item div
    if (jQuery(e.target).is('.move-down')) { //check if clicked is movedown
        $div.next('.item').after($div); //if it is move after next
    } else {
        $div.prev('.item').before($div);//else move it before previous
    }
});

    VIOLON

    InformationsquelleAutor ᾠῗᵲᄐᶌ
  2. 3

    Je serais probablement faire quelque chose comme ceci:

    $(document).ready(function () {
    $('.move-down').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.next();
        item.before(swapWith.detach());
    });
    $('.move-up').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.prev();
        item.after(swapWith.detach());
    });
});

    Voici un exemple de travail: http://jsfiddle.net/a6Se4/

    InformationsquelleAutor pete
  3. 2

    essayer:

    jQuery('.move > div').on('click', function(event) {
    var item = jQuery(this).closest('div.item');
    if(jQuery(this).hasClass('move-down')) {
        item.prev('div.item').before(item);
    } else {
        item.next('div.item').after(item);
    }
});
    InformationsquelleAutor Derek
  4. 2

    Je sais que c'est résolu, mais je voulais juste laisser cette solution que j'ai trouvée alors que je cherchais une réponse à la même question:

    Est-il un natif, jQuery fonction pour basculer éléments?

    jQuery("#element1").before(jQuery("#element2"));
or
jQuery("#element1").after(jQuery("#element2"));

    c'est pratiquement ce que Derek a suggéré que.

    InformationsquelleAutor Stilmittel