Позиции переключателя 2 divs с jQuery

Question

Мне интересно, можно ли переключить позиции двух div с jQuery.

У меня есть два DIV, как этот

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

так что если div2 имеет содержание (или содержит больше, чем просто пробелами) он переключает порядок div1 и div2

так это:

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

станет следующим:

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

Но если бы это было так:

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

или это:

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

было бы ничего не делать.

Также ... если возможно, если включен, я хотел бы добавить класс к div1.

Любая помощь с этим будет очень оценена.

UPDATE:

Я забыл добавить, что я должен запустить это через multipul instanses на той же странице.

Каждый экземпляр отформатированный как это:

<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

Я брошу в моем решении

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

Edit: Не работает пробельных в div2.Вот обновлённый решение:

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

Answer 2

некоторые советы, которые могут помочь ..
How to position one element relative to another with jQuery?

и вы также можете использовать $('.div2').html().trim(), чтобы проверить погоду он пуст или нет.

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

Хорошо ... почему вы пытаетесь изменить ПОЛОЖЕНИЕ элементов div. Это имеет значение? Почему бы не изменить СОДЕРЖАНИЕ?

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

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

Добавить trim(), если вы хотите удалить пробелы.

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

Вот пример:

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

Сначала вы хотите, чтобы клонировать элементы. Затем проверьте условие, если div2 пуст. Затем выполните обмен:

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

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

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

    tdiv1.addClass("replaced"); 
}