Posiciones del interruptor de 2 div con jQuery

Me pregunto si es posible cambiar las posiciones de los dos divs con jQuery.

Tengo dos div como este

<div class="div1">STUFF ONE</div>
<div class="div2">STUFF TWO</div>

así que si div2 tiene contenido (o contiene algo más que espacios en blanco) se cambia el orden de div1 y div2

ello:

<div class="div1">STUFF ONE</div>
<div class="div2">STUFF TWO</div>

sería este:

<div class="div2">STUFF TWO</div>
<div class="div1">STUFF ONE</div>

Pero si fue este:

<div class="div1">STUFF ONE</div>
<div class="div2"></div>

o este:

<div class="div1">STUFF ONE</div>
<div class="div2">    </div>

no hacer nada.

También… si es posible, si se quisiera añadir una clase a div1.

Cualquier ayuda con esto será muy apreciada.

ACTUALIZACIÓN:

Me olvidé de agregar que tengo que correr a través de este multipul instanses en la misma página.

Cada instancia se formatea como este:

<div class="view-container"> 
  <div class="view-content"> 
   <div class="views-row">
     <div class="div1">STUFF ONE</div>
     <div class="div2">STUFF TWO</div>
   </div>
   <div class="views-row">
     <div class="div1">STUFF ONE</div>
     <div class="div2">STUFF TWO</div>
   </div>
  </div>
</div>

5 Kommentare

  1. 42

    Voy a tirar en mi solución

    $('.div2:parent').each(function () {
        $(this).insertBefore($(this).prev('.div1'));
    });

    Edit: no funciona para los espacios en blanco en div2. He aquí una solución actualizada:

    $('.div2').each(function () {
        if (!$(this).text().match(/^\s*$/)) {
            $(this).insertBefore($(this).prev('.div1'));
        }
    });
    • He añadido esta línea para agregar la clase $(this).next('.div1').addClass('new-class'); ¿eso es correcto?
    • Me gusta mucho esta solución. Muy minimalista.
    • No esta de crear duplicados?
    • Nope. «Si un elemento seleccionado de esta manera se inserta en otro lugar, será movido antes de que el destino (no clonado)». Consulte api.jquery.com/insertBefore
    • Gracias. Yo no habría pensado en eso! Impar.
    • no entendía el código en realidad, pero su impresionante. Sería grande si usted podría arrojar algo de luz. 🙂

  2. 20

    He aquí un ejemplo:

    http://jsfiddle.net/52xQP/1/

    Primera que se desea clonar los elementos. A continuación, comprobar una condición si div2 está vacía. A continuación, hacer el swap:

    div1 = $('#div1');
    div2 = $('#div2');
    
    tdiv1 = div1.clone();
    tdiv2 = div2.clone();
    
    if(!div2.is(':empty')){
        div1.replaceWith(tdiv2);
        div2.replaceWith(tdiv1);
    
        tdiv1.addClass("replaced");
    }
  3. 2

    Bien … ¿por qué estás tratando de cambiar la POSICIÓN de los elementos div. ¿Importa? ¿Por qué no cambiar el CONTENIDO?

    var divOneText = $('#div1').html();
    var divTwoText = $('#div2').html();
    
    if (divOneText != '' && divTwoText != '') {
      $('#div1').html(divTwoText);
      $('#div2').html(divOneText);
    }

    Agregar trim() si desea quitar espacios en blanco.

    • Hola @Grrbrr404. Que necesito para seguir las clases en relación con el contenido. Gracias por responder, aunque.
    • A continuación, cambiar css también. Es mucho más fácil y más rápido después de la conmutación completa elemento
    • No estoy de acuerdo. Si usted sabe que usted quiere que todo acerca de la divs para ser intercambiados alrededor, y luego el tonto a prueba de enfoque es intercambiar los propios nodos. Si, en lugar de crear un blanca de contenido para swap, te vas a perder algo: si no ahora, más tarde, cuando el marcado de los cambios.
    • Me encantó esta solución de «verificación y copiado de los no-espacio, los personajes de» solución. Simple y de trabajo!
  4. 1
    var row2content = $('.div2').html();                //Get row 2s content
    row2contentnospaces = row2content.replace(' ', ''); //Eliminate whitespace
    if(!(row2contentnospaces == '')){                   //Check if row2 is empty
        var row2 = $('.div2');                          //Get row 2
        $('.div2').remove();                            //remove row2
        $('.div1').before(row2);                        //add row 2 before row 1
    }
    • Gracias @David. Esto se ve muy bien. Se me olvidó añadir que tengo que correr a través de este multipul instanses en la misma página. Se que cambiar nada?
    • Suponiendo que están usando la misma clase de nombres una y otra vez, entonces sí que va a causar problemas. Para solucionar esto yo pondría a cada emparejamiento en el div, y, a continuación, cambiar el código a ver a los hermanos. ES que el caso?
    • Actualizado solución que viene.
    • Hola @David. ¿Cuáles son sus pensamientos sobre rfausak del sollution?
    • Es una solución muy elegante para el problema. Me gustaría ir con ella.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein