用jQuery切换2 div的位置
我想知道是否可以用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>
,我会在我的解决方案抛出
$('.div2:parent').each(function() {
$(this).insertBefore($(this).prev('.div1'));
});
编辑:在DIV2空白不工作。这里有一个更新的解决方案:
$('.div2').each(function() {
if (!$(this).text().match(/^\s*$/)) {
$(this).insertBefore($(this).prev('.div1'));
}
});
一些提示,可以帮助..
How to position one element relative to another with jQuery?
,你也可以使用$('.div2').html().trim()
来检查的天气很空。
谢谢,我现在检查一下。 – Cybercampbell 2012-01-27 07:58:18
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
}
谢谢@David。这看起来不错。我忘了补充说,我必须在同一页面上的多个实例中运行此操作。这会改变什么吗? – Cybercampbell 2012-01-27 08:10:15
假设他们一遍又一遍地使用相同的类名,那么会导致问题。为了解决这个问题,我会把每个配对放在div中,然后改变一些代码来寻找兄弟姐妹。是这样吗? – 2012-01-27 08:14:13
刚刚发布了上面的示例代码。 – Cybercampbell 2012-01-27 08:17:21
那么......你为什么要改变div元素的位置。有关系吗?为什么不改变内容?
var divOneText = $('#div1').html();
var divTwoText = $('#div2').html();
if (divOneText != '' && divTwoText != '') {
$('#div1').html(divTwoText);
$('#div2').html(divOneText);
}
如果您想删除空格,请添加trim()。
Hi @ Grrbrr404。我需要保持与内容相关的类。感谢您的回应。 – Cybercampbell 2012-01-27 08:02:17
然后更改css。它更容易和更快,然后切换完成元素 – Grrbrr404 2012-01-27 08:03:42
@ Grrbrr404:我不同意。如果你知道你希望'div'的所有内容都可以交换,那么这种傻瓜式的方法就是交换节点本身。如果您改为创建一个_whitelist_内容进行交换,那么您将错过某些内容:如果不是现在,那么稍后会在标记更改时错过。 – 2012-02-02 14:47:28
if(div1First){
var div2 = ($('.div2')).detach();
($('.div1')).append(div2);
}else{
var div1 = ($('.div1')).detach();
($('.div2')).append(div1);
}
我真的很喜欢那种分离方法。在此之前我从未听说过它。尼斯。 – 2012-01-27 08:16:13
下面是一个例子:
首先要克隆的元素。然后,检查一个条件,如果div2为空。然后,做交换:
div1 = $('#div1');
div2 = $('#div2');
tdiv1 = div1.clone();
tdiv2 = div2.clone();
if(!div2.is(':empty')){
div1.replaceWith(tdiv2);
div2.replaceWith(tdiv1);
tdiv1.addClass("replaced");
}
这个工作很好 – jdmdevdotnet 2018-01-03 16:32:22
我添加了这一行来添加类'$(this).next('。div1')。addClass('new-class');'看起来是否正确? – Cybercampbell 2012-01-27 08:25:57
我真的很喜欢这个解决方案。非常简约。 – 2012-01-27 08:35:16
这不会造成重复吗? – 2012-02-02 14:46:24