2012-01-27 54 views
26

我想知道是否可以用jQuery切换两个div的位置。用jQuery切换2 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

任何帮助将非常感谢。

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> 

回答

35

,我会在我的解决方案抛出

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

编辑:在DIV2空白不工作。这里有一个更新的解决方案:

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

我添加了这一行来添加类'$(this).next('。div1')。addClass('new-class');'看起来是否正确? – Cybercampbell 2012-01-27 08:25:57

+1

我真的很喜欢这个解决方案。非常简约。 – 2012-01-27 08:35:16

+0

这不会造成重复吗? – 2012-02-02 14:46:24

1
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 
} 
+0

谢谢@David。这看起来不错。我忘了补充说,我必须在同一页面上的多个实例中运行此操作。这会改变什么吗? – Cybercampbell 2012-01-27 08:10:15

+0

假设他们一遍又一遍地使用相同的类名,那么会导致问题。为了解决这个问题,我会把每个配对放在div中,然后改变一些代码来寻找兄弟姐妹。是这样吗? – 2012-01-27 08:14:13

+0

刚刚发布了上面的示例代码。 – Cybercampbell 2012-01-27 08:17:21

-1

那么......你为什么要改变div元素的位置。有关系吗?为什么不改变内容?

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

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

如果您想删除空格,请添加trim()。

+0

Hi @ Grrbrr404。我需要保持与内容相关的类。感谢您的回应。 – Cybercampbell 2012-01-27 08:02:17

+0

然后更改css。它更容易和更快,然后切换完成元素 – Grrbrr404 2012-01-27 08:03:42

+0

@ Grrbrr404:我不同意。如果你知道你希望'div'的所有内容都可以交换,那么这种傻瓜式的方法就是交换节点本身。如果您改为创建一个_whitelist_内容进行交换,那么您将错过某些内容:如果不是现在,那么稍后会在标记更改时错过。 – 2012-02-02 14:47:28

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

Fiddle to try it.

+1

我真的很喜欢那种分离方法。在此之前我从未听说过它。尼斯。 – 2012-01-27 08:16:13

15

下面是一个例子:

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

这个工作很好 – jdmdevdotnet 2018-01-03 16:32:22