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

Answer 3

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

Fiddle to try it.

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

Answer 5

我为此找到了4行优雅的jQuery插件。 作者Yannick Guinness 。

/**
 * Swap an element with another one
 * @author: Yannick Guinness
 * @version: 0.1
 *
 * @params {Object} element - object that has to be swapped
 * @return: {jQuery Object}
 *
 * @usage:
 *     $('.one').swap('.two');
 *
 * @license: MIT
 * @date: 2013/07/22
 **/
$.fn.swap = function (elem) {
    elem = elem.jquery ? elem : $(elem);
    return this.each(function () {
        $(document.createTextNode('')).insertBefore(this).before(elem.before(this)).remove();
    });
};

$('.one').on('click', function () {
    alert(true);
});

$('input').click(function () {
    $('.one').swap('.two');
});

Run it in fiddle

@Vigront的答案既简单又好（我赞成），但它有一个严重的缺点-在克隆元素松散事件并绑定到它们时...

该插件没有这样的问题。甚至小提琴也包含click事件来演示它。

Answer 6

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

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

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

如果要删除空格，请添加trim（）。

用jQuery切换2个div的位置

6 个答案: