通過jQuery中的不同瀏覽器寬度重新定位div通過不同的瀏覽器寬度

Question

我在jQuery中發現了一個簡單的方法，它允許我根據瀏覽器的寬度在其他div之後添加div。因此，如果瀏覽器寬度超過500px，告訴瀏覽器在第30個「inner」div後插入「test5」div。然後我也告訴它，如果瀏覽器寬度小於500px，刪除這個div。我也得到了與多個div的工作，所以當瀏覽器寬度小於500px時，它會隱藏放在第30個「內部」div後面的原始div，然後顯示另外四個div（test，test2，test3 & test4）。所以我得到了整個事情與多個div的工作。這很棒。

現在，我想要更改每個指定瀏覽器寬度的div的nth-child位置。所以我現在要做的方式是在一個寬度上插入5個div，將它們隱藏另一個寬度，爲另一個寬度插入另外5個div，將其隱藏爲另一個寬度等等。我不想不斷地添加5個div，然後爲每個不同的瀏覽器寬度隱藏它們，我只想爲不同的瀏覽器寬度更改第n個孩子的位置。所以這裏是我的舊代碼..請注意，對於這個例子我只使用5個div，當瀏覽器寬度超過500px時顯示1，然後顯示瀏覽器寬度小於500px時顯示的4個div。

這裏是舊代碼：

var $window = $(window); 
var resized=false; 
var resized500=false; 
function checkWidth() { 

var windowsize = $window.width(); 
if (windowsize > 440) { 
    if(resized==false){ 
    $('.inner:nth-child(5)').after('<div class="test">'); 
    $('.inner:nth-child(10)').after('<div class="test2">'); 
     resized=true; 
    } 
} 

if (windowsize > 500) { 
    if(resized500==false){ 
$('.inner:nth-child(30)').after('<div class="test3">'); 
     resized500=true; 
    } 
} 
if (windowsize >= 500) { 
    $('.test, .test2').remove(); 
    resized=false; 
} 
if (windowsize <= 500) { 
    $('.test3').remove(); 
    resized500=false; 
} 
} 
// Execute on load 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

這裏是舊的jsfiddle證明此代碼的（你必須調整HTML窗口才能看到的div出現，dissapear）：

http://jsfiddle.net/EUqEm/72/

我想想出一個方法，不會隱藏div或在瀏覽器寬度變化時添加新的方法，而是我希望通過nth-child爲每個指定的瀏覽器寬度重新定位div。我不知道我會如何做到這一點，但這是一個基本的jQuery代碼，我認爲它可以工作，以及一個jsfiddle。出於示例目的，這是3個瀏覽器寬度。

var $window = $(window); 
var resized=false; 
var resized500=false; 
var resized600=false; 
function checkWidth() { 

var windowsize = $window.width(); 
if (windowsize > 440 && windowsize < 500) { 
    //if the window is in between the sizes of 440 and 500px 
    if(resized==false){ 
    $('.inner:nth-child(5)').after('<div class="test">'); 
    $('.inner:nth-child(10)').after('<div class="test2">'); 
    $('.inner:nth-child(12)').after('<div class="test3">'); 
    $('.inner:nth-child(15)').after('<div class="test4">'); 
     resized=true; 
    } 
} 

if (windowsize > 500 && windowsize < 600) { 
    //if the window is in between the sizes of 500 and 600px 
    if(resized500==false){ 

// code that repositions all four test divs up one number (5 to 6, 10 to 11, etc.) 
     resized500=true; 

    } 
} 

if (windowsize > 600 && windowsize < 700) { 
    //if the window is in between the sizes of 600 and 700px 
    if(resized600==false){ 

// code that repositions all four test divs up one number again.(6 to 7, 11 to 12, etc.) 
     resized600=true; 

    } 
} 

} 

// Execute on load 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

這裏是早期的基礎代碼的jsfiddle（並不完全工作，因爲沒有對各種瀏覽器設置寬度值）：

http://jsfiddle.net/EUqEm/73/

所以只是回顧一下真正的快速：

我有div被放在其他divs之後，通過nth-child出現和基於觀衆瀏覽器寬度dissapear。目前，我必須通過n-child（這很好）將div放在正確的位置，然後讓div取消分辨率，然後重新顯示新的div，並且我必須對所有瀏覽器寬度/決議。我想這樣做，所以我通過nth-child插入這個div（就像我現在正在做的那樣），而不是必須隱藏div併爲每個瀏覽器寬度顯示新的div，我希望能夠更改用於不同瀏覽器寬度的第n個孩子位置。

如果有人知道這個問題的解決方案，請隨時留下一個答案，甚至可以使用jsFiddle演示版。 :)

Answer 1

我已更改要使用的代碼和包含div元素的對象以及通過在正確的位置創建新的div並刪除當前元素來更改元素nth-child值的功能。

這裏是div S的物：

var theDivs={ 
    "div1":$("<div />").addClass("test"), 
    "div2":$("<div />").addClass("test2"), 
    "div3":$("<div />").addClass("test3"), 
    "div4":$("<div />").addClass("test4") 
}; 

這裏是功能：

function setNthPosition(theDiv,newPos){ 
    //Clone the specific div 
    var theClone=theDivs["div"+theDiv].clone(); 

    //Replace the nth div with the clone 
    $("#wrapper div:nth-child("+newPos+")").replaceWith(theClone); 
} 

此外，您resized布爾檢查未正確設置，所以我只是他們評論出。

以下是完整的的jsfiddle： http://jsfiddle.net/EUqEm/85/