web-dev-qa-db-fra.com

Elément mobile JavaScript dans le DOM

Disons que j'ai trois <div> éléments sur une page. Comment puis-je échanger les positions du premier et du troisième <div>? jQuery va bien.

javascriptjquerydom
87
core

Trivial avec jQuery

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

Si vous voulez le faire de manière répétée, vous devrez utiliser différents sélecteurs, car les div conserveront leurs identifiants lors de leurs déplacements.

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});
105
tvanfosson

Il n'est pas nécessaire d'utiliser une bibliothèque pour une tâche aussi triviale:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

Ceci prend en compte le fait que getElementsByTagName renvoie une liste de nœuds active qui est automatiquement mise à jour pour refléter l'ordre des éléments dans le DOM lors de leur manipulation.

Vous pouvez aussi utiliser:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

et il y a diverses autres permutations possibles, si vous avez envie d'expérimenter:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

par exemple :-)

156
NickFitz

.avant et après

Utilisez la vanille moderne JS! Bien mieux/plus propre qu'avant. Pas besoin de faire référence à un parent.

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

Support du navigateur - 90% global à partir de juin 19

11
Gibolt
jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

et l'utiliser comme ça:

$('#div1').swap('#div2');

si vous ne voulez pas utiliser jQuery, vous pouvez facilement adapter la fonction.

9
Darin Dimitrov
var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

Cette fonction peut sembler étrange, mais elle dépend fortement des normes pour fonctionner correctement. En fait, il peut sembler fonctionner mieux que version jQuery publiée par tvanfosson , qui semble effectuer l’échange deux fois seulement.

Sur quelles normes repose-t-il?

insertBefore Insère le nœud newChild avant le nœud enfant existant, refChild. Si refChild est null, insérez newChild à la fin de la liste des enfants. Si newChild est un objet DocumentFragment, tous ses enfants sont insérés, dans le même ordre, avant refChild. Si newChild est déjà dans l'arborescence, il est d'abord supprimé.

5
Ionuț G. Stan

L’approche Jquery mentionnée en haut fonctionnera. Vous pouvez également utiliser JQuery et CSS .Say pour, par exemple, sur Div 1, vous avez appliqué class1 et sur div2, vous avez appliqué class class2 (par exemple, chaque classe de css fournit une position spécifique sur le navigateur), vous pouvez désormais échanger les classes à l'aide de jquery ou javascript (cela changera la position)

0
Rajat

Désolé de rencontrer ce fil, je suis tombé sur le problème de "permutation des éléments DOM" et j'ai joué un peu

Le résultat est une "solution" native de jQuery qui semble être vraiment jolie (malheureusement, je ne sais pas ce qui se passe à l'intérieur de jQuery en le faisant)

Le code:

$('#element1').insertAfter($('#element2'));

La documentation de jQuery indique que insertAfter()déplace l'élément et ne le clone pas

0
storrm