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

來源

2012-01-27 Cybercampbell

，我會在我的解決方案拋出

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

編輯：在DIV2空白不工作。這裏有一個更新的解決方案：

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

來源

2012-01-27 08:04:17

我添加了這一行來添加類'$（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

一些提示，可以幫助..
How to position one element relative to another with jQuery?

，你也可以使用$('.div2').html().trim()來檢查的天氣很空。

來源

2012-01-27 07:56:33 Raathigesh

謝謝，我現在檢查一下。 – 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 
}

來源

2012-01-27 07:58:23

謝謝@David。這看起來不錯。我忘了補充說，我必須在同一頁面上的多個實例中運行此操作。這會改變什麼嗎？ – Cybercampbell 2012-01-27 08:10:15

假設他們一遍又一遍地使用相同的類名，那麼會導致問題。爲了解決這個問題，我會把每個配對放在div中，然後改變一些代碼來尋找兄弟姐妹。是這樣嗎？ – 2012-01-27 08:14:13

剛剛發佈了上面的示例代碼。 – 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（）。

來源

2012-01-27 08:00:08 Grrbrr404

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

Fiddle to try it.

來源

2012-01-27 08:01:52 Farmor

我真的很喜歡那種分離方法。在此之前我從未聽說過它。尼斯。 – 2012-01-27 08:16:13

下面是一個例子：

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

來源

2012-01-27 08:09:25 Vigrond

這個工作很好 – jdmdevdotnet 2018-01-03 16:32:22

用jQuery切換2 div的位置

回答

相關問題