Posizioni di commutazione di 2 div con jQuery

Question

Mi chiedo se sia possibile cambiare posizione di due div con jQuery.

Ho due div come questo

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

quindi se div2 ha un contenuto (o contiene più di spazi solo bianchi) si passa l'ordine di div1 e div2

quindi questo:

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

diventerebbe questo:

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

Ma se era questo:

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

o questo:

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

sarebbe non fare nulla.

Inoltre ... se possibile, se attivato desidero aggiungere una classe a div1.

Qualsiasi aiuto con questo sarà molto apprezzato.

UPDATE:

Ho dimenticato di aggiungere che devo eseguire questo attraverso instanses multipul sulla stessa pagina.

Ogni istanza è formattato in questo modo:

<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> 

Answer 1

mi butto nella mia soluzione

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

Edit: Non funziona per gli spazi bianchi in div2.Ecco una soluzione aggiornata:

$('.div2').each(function() { 
    if (!$(this).text().match(/^\s*$/)) { 
     $(this).insertBefore($(this).prev('.div1')); 
    } 
}); 

Answer 2

alcuni suggerimenti che possono aiutare ..
How to position one element relative to another with jQuery?

e si può anche utilizzare $('.div2').html().trim() per controllare il meteo è vuota o no.

Answer 3

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 
} 

Answer 4

Bene ... perché stai cercando di modificare la POSIZIONE degli elementi div. Importa? Perché non cambiare il CONTENUTO?

var divOneText = $('#div1').html(); 
var divTwoText = $('#div2').html(); 

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

Aggiungi ritaglio() se si desidera rimuovere gli spazi.

Answer 5

if(div1First){ 
var div2 = ($('.div2')).detach(); 
($('.div1')).append(div2); 
}else{ 
var div1 = ($('.div1')).detach(); 
($('.div2')).append(div1); 
} 

Fiddle to try it.

Answer 6

Ecco un esempio:

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

primo luogo si vuole clonare gli elementi. Quindi, controlla una condizione se div2 è vuoto. Quindi, fai lo scambio:

div1 = $('#div1'); 
div2 = $('#div2'); 

tdiv1 = div1.clone(); 
tdiv2 = div2.clone(); 

if(!div2.is(':empty')){ 
    div1.replaceWith(tdiv2); 
    div2.replaceWith(tdiv1); 

    tdiv1.addClass("replaced"); 
}