Переключение позиций из 2 разделов с помощью jQuery

Мне интересно, можно ли переключить позиции двух 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:

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

Каждый экземпляр формируется следующим образом:

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

Ответ 1

Я поставлю свое решение

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

Изменить: не работает для пробелов в div2. Здесь обновленное решение:

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

Ответ 2

Вот пример:

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");
}

Ответ 3

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

Попробуйте его попробовать

Ответ 4

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
}

Ответ 5

некоторые советы, которые могут помочь.
Как разместить один элемент относительно другого с помощью jQuery?

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

Ответ 6

Ну... почему вы пытаетесь изменить POSITION элементов div. Это имеет значение? Почему бы не изменить CONTENT?

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

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

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