用jQuery切换2个div的位置 [英] Switch positions of 2 divs with jQuery

问题描述

我有两个div，像这样

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

所以如果 div2 不仅仅是空格），它会切换 div1 和 div2

$ b的顺序$ b

so this：

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

解决方案

我会抛出我的解决方案

$ b $

  $（'。div2：parent'）。each（function（）{
 $（this）.insertBefore（$（this ）.prev（'。div1'））; 
}）; 
  

编辑：不适用于div2中的空格。这里有一个更新的解决方案：

  $（'。div2'）。each（function（）{
 if（！ $（this）.text（）。match（/ ^ \s * $ /））{
 $（this）.insertBefore（$（this）.prev（'。div1'））; 
} 
}）; 
  

I'm wondering if it's posible to switch positions of two divs with jQuery.

I have two div like this

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

so if div2 has content (or contains more than just white spaces) it switches the order of div1 and div2

so this:

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

would become this:

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

But if it was this:

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

or this:

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

it wouldn't do anything.

Also... if posible, if switched I would like to add a class to div1.

Any help with this will be very much appreciated.

UPDATE:

I forgot to add that I have to run this across multipul instanses on the same page.

Each instance is formated like this:

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

解决方案

I'll throw in my solution

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

Edit: Doesn't work for whitespace in div2. Here's an updated solution:

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

这篇关于用jQuery切换2个div的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！