Existe-t-il une fonction jQuery native pour changer d’éléments?

Question

Puis-je facilement échanger deux éléments avec jQuery?

Je cherche à le faire avec une ligne si possible

J'ai un élément select et j'ai deux boutons pour monter ou descendre les options et j'ai déjà les sélecteurs sélectionnés et les sélecteurs de destination en place, je le fais avec un if, mais je me demandais s'il y avait un moyen plus facile

Answer 1

J'ai trouvé un moyen intéressant de résoudre ce problème en utilisant uniquement jQuery:

 $("#element1").before($("#element2"));
 

ou

 $("#element1").after($("#element2"));
 

:)

Answer 2

Paulo a raison, mais je ne sais pas pourquoi il clone les éléments concernés. Cela n'est pas vraiment nécessaire et perdra toute référence ou écouteur d'événement associé aux éléments et à leurs descendants.

Voici une version sans clonage utilisant des méthodes DOM simples (jQuery n'ayant pas vraiment de fonctions spéciales pour faciliter cette opération):

 function swapNodes(a, b) {
    var aparent= a.parentNode;
    var asibling= a.nextSibling===b? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}
 

Answer 3

Non, il n'y en a pas, mais vous pouvez en fouetter un:

 jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};
 

Usage:

 $(selector1).swapWith(selector2);
 

Notez que cela ne fonctionne que si les sélecteurs ne correspondent qu'à 1 élément, sinon cela pourrait donner des résultats étranges.

Answer 4

Il y a beaucoup de cas de ce problème, qui ne sont pas gérées par le a accepté de répondre ou bobince de réponse. D'autres solutions qui impliquent le clonage sont sur la bonne voie, mais le clonage est coûteux et inutile. Nous sommes tentés de clone, en raison de l'ancienneté du problème de savoir comment permuter deux variables, dont l'une des étapes consiste à attribuer à l'une des variables à une variable temporaire. La cession, (clonage), dans ce cas n'est pas nécessaire. Voici un jQuery solution basée sur:

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

Answer 5

Vous ne devriez pas avoir besoin de deux clones, fera-t-on. En prenant la réponse de Paolo Bergantino, nous avons:

 jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        $(to).replaceWith(this);
        $(this).replaceWith(copy_to);
    });
};
 

Devrait être plus rapide. Passer le plus petit des deux éléments devrait également accélérer les choses.