Chuyển vị trí của 2 div với jQuery

Question

Tôi tự hỏi nếu nó có thể chuyển vị trí của hai div với jQuery.

Tôi có hai div như thế này

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

vì vậy nếu div2 có nội dung (hoặc chứa hơn không gian chỉ trắng) nó chuyển thứ tự của div1 và div2

vì vậy đây:

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

sẽ trở thành:

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

Nhưng nếu nó là thế này:

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

hay này:

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

nó sẽ không làm gì cả.

Ngoài ra ... nếu có thể, nếu được chuyển, tôi muốn thêm lớp học vào div1.

Bất kỳ trợ giúp nào về vấn đề này sẽ được đánh giá rất nhiều.

CẬP NHẬT:

Tôi quên thêm rằng tôi phải chạy tính năng này trên nhiều bản sao trên cùng một trang.

Mỗi trường hợp được formated như thế này:

<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

tôi sẽ ném vào giải pháp của tôi

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

Edit: Không làm việc cho khoảng trắng trong div2.Dưới đây là một giải pháp Cập nhật:

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

Answer 2

một số mẹo có thể giúp ..
How to position one element relative to another with jQuery?

và bạn cũng có thể sử dụng $('.div2').html().trim() để kiểm tra thời tiết đó là trống hay không.

Answer 3

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 4

Vâng ... tại sao bạn đang cố thay đổi POSITION của các phần tử div. Nó có quan trọng không? Tại sao không thay đổi CONTENT?

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

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

Thêm cắt() nếu bạn muốn xóa khoảng trắng.

Answer 5

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

Fiddle to try it.

Answer 6

Dưới đây là một ví dụ:

http://jsfiddle.net/52xQP/1/

Trước tiên, bạn muốn sao chép các yếu tố này. Sau đó, kiểm tra điều kiện nếu div2 rỗng. Sau đó, thực hiện hoán đổi:

div1 = $('#div1'); 
div2 = $('#div2'); 

tdiv1 = div1.clone(); 
tdiv2 = div2.clone(); 

if(!div2.is(':empty')){ 
    div1.replaceWith(tdiv2); 
    div2.replaceWith(tdiv1); 

    tdiv1.addClass("replaced"); 
}