¿Cuál es la forma más sencilla de intercambiar el orden de los nodos secundarios?

Por ejemplo yo quiero childNode[3] para childNode[4] y viceversa.

InformationsquelleAutor Myforwik | 2012-03-16

6 Comentarios

  1. 56

    No es necesario para la clonación. Sólo se puede mover un nodo antes de que el otro con este:

    childNode[4].parentNode.insertBefore(childNode[4], childNode[3]);

    Usted consigue el padre del nodo. A continuación, llamar a la insertBefore en el padre y le pasamos el childNode[4] nodo y decirle lo que quieres que se inserta antes de childNode[3]. Que le dará el resultado de intercambiar su orden para 4 será antes de las 3 cuando se hace.

    Referencia documentación en insertBefore.

    Cualquier nodo que se inserta en la DOM que ya está en el DOM es el primer eliminado automáticamente y, a continuación, volver a insertar por lo que no hay necesidad de sacar manualmente la primera vez.

    • +1 se puede resumir diciendo que «un nodo sólo puede existir en una ubicación en la DOM en un momento»: así, la colocación en otro lugar se mueve desde el lugar donde actualmente está.
    • +1 no saber sobre el «movimiento» en efecto, pero esto es mejor
    • +1 para referencia
    • cómo lograr la misma cosa para un desconocido id de nodo ? decir que se desconoce si hay childNode[3]
    • usted tiene que tener alguna manera de obtener los dos elementos que desea intercambiar. Hay casi siempre una forma de hacerlo, pero, ¿cómo depende el HTML en particular de la situación y la estructura.
    • Idea: puedes obtener primero el siguiente hermano de la tarde elemento(Item2). Insertar item2 antes de Elemento1. a continuación, inserte elemento1 antes de la siguiente hermano que guardó anteriormente.
    • Sólo funciona para adjecent hermanos que no es la pregunta.
    • Uhhh, la pregunta era específicamente sobre el intercambio de childnode[3] con childnode[4] que ciertamente son adyacentes a los hermanos y lo hizo al parecer funcionan bien el OP (ya que aceptó la respuesta). Esto no responder a la pregunta del OP intención.
    • Si desea genéricamente swap cualquiera de los dos elementos, se puede ver que aquí el código: Intercambiar dos elementos HTML.
    • Para ir un paso más allá… la respuesta es correcta a lo largo de las líneas de su respuesta. stackoverflow.com/questions/4793604/… referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

  2. 8

    Respuesta por jfriend00 realmente no intercambiar los elementos (de «swaps» sólo los elementos que están uno al lado del otro, y sólo bajo el mismo nodo padre). Esto está bien, ya que esta era la pregunta.

    Este ejemplo swaps de elementos de la clonación, pero independientemente de su posición y nivel de DOM:

    //Note: Cloned copy of element1 will be returned to get a new reference back
    function exchangeElements(element1, element2)
    {
        var clonedElement1 = element1.cloneNode(true);
        var clonedElement2 = element2.cloneNode(true);
    
        element2.parentNode.replaceChild(clonedElement1, element2);
        element1.parentNode.replaceChild(clonedElement2, element1);
    
        return clonedElement1;
    }

    Edit: Añadido volver de nuevo referencia (si desea mantener la referencia, e. g. para acceder atributo «parentNode» (de lo contrario se pierde)). Ejemplo: e1 = exchangeElements(e1, e2);

    • Este perderán todos los controladores de eventos asignados a los nodos.
  3. 4

    Uso .before o .after!

    Esta es la vainilla JS!

    childNode[3].before(childNode[4]);

    o

    childNode[4].after(childNode[3]);

    Para más durabilidad intercambio, la prueba:

    function swap(node1, node2) {
        const afterNode2 = node2.nextElementSibling;
        const parent = node2.parentNode;
        node1.replaceWith(node2);
        parent.insertBefore(node1, afterNode2);
    }

    Esto debería funcionar, incluso si los padres no coinciden

    Puedo Usar – El 86% de Noviembre de 2018

  4. 1

    Para un verdadero Intercambio de cualquiera de los nodos sin cloneNode:

        <div id="d1">D1</div>
        <div id="d2">D2</div>
        <div id="d3">D3</div>

    Con SwapNode función (usando PrototypeJS):

    function SwapNode(N1, N2)  {
    N1 = $(N1);
    N2 = $(N2);
    
    if (N1 && N2) {
        var P1 = N1.parentNode;
        var T1 = document.createElement("span");    
        P1.insertBefore(T1, N1);
    
        var P2 = N2.parentNode;
        var T2 = document.createElement("span");
        P2.insertBefore(T2, N2);
    
        P1.insertBefore(N2, T1);
        P2.insertBefore(N1, T2);
    
        P1.removeChild(T1);
        P2.removeChild(T2);
    }
    }
    SwapNode('d1', 'd2');
    SwapNode('d2', 'd3');

    Producirá:

    <div id="d3">D3</div>
    <div id="d1">D1</div>
    <div id="d2">D2</div>
  5. 0

    Probar este método:

    1. Get the parent element
    2. Tienda de la two elements you want to swap
    3. Tienda de la .nextSibling of the node that is last in order
      por ejemplo: [1,2,3,4] => queremos swap 3 & 2, a continuación, almacenar nextSibling de 3, ‘4’.

    4. .insertBefore(3,2);

    5. .insertBefore(2,nextSibling);
  6. 0

    Necesitaba una función para intercambiar dos arbitrario de nodos de mantener la intercambian los elementos en el mismo lugar en el dom. Por ejemplo, si un estaba en la posición 2 en relación con su progenitor y b estaba en la posición 0 respecto a su padre, b debe reemplazar la posición 2 de un‘s antiguo de los padres y un debe reemplazar en niños de 0 de b‘s antiguo de los padres.

    Esta es mi solución, que permite el intercambio de estar en completamente diferentes partes de la dom. Tenga en cuenta que el intercambio no puede ser un simple de tres pasos de intercambio. Cada uno de los dos elementos, es necesario quitar el dom primero, ya que puede haber hermanos que necesitan actualización, etc.

    Solución: puse dos titular del div para mantener la posición de cada nodo para mantener la relación de hermanos de la orden. Yo, a continuación, vuelva a insertar cada uno de los nodos en el otro marcador de posición, manteniendo la posición relativa que el nodo intercambia había antes del intercambio. (Mi solución es similar a la de Buck).

    function swapDom(a,b) 
    {
         var aParent = a.parentNode;
         var bParent = b.parentNode;
    
         var aHolder = document.createElement("div");
         var bHolder = document.createElement("div");
    
         aParent.replaceChild(aHolder,a);
         bParent.replaceChild(bHolder,b);
    
         aParent.replaceChild(b,aHolder);
         bParent.replaceChild(a,bHolder);    
    }

Dejar respuesta

Please enter your comment!
Please enter your name here