用jQuery切换2个div的位置

Question

我想知道用jQuery切换两个div的位置是否可行.

我有两个这样的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.

任何有关这方面的帮助将非常感谢.

更新:

我忘了补充一点,我必须在同一页面上的多个实例中运行它.

每个实例的格式如下:

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

编辑:不适用于div2中的空白.这是一个更新的解决方案:

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

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