JQuery在頁面加載時重定位div元素

我正在使用Interface和JQuery實現portlet /小部件JQuery接口。用戶拖放小部件並在屏幕上處理它。我能夠使用serialize顯示屏幕上div元素的順序。我可以將它保存在一個cookie或數據庫中 - 這並不重要。JQuery在頁面加載時重定位div元素

我的問題是如何加載頁面重新定位divs以匹配cookie/DB中的順序？一個基於cookie的例子會很好，但它並不重要。

是否有某種JQuery方法可以調用，能夠按照我希望它們的順序重新定位div？

來源

2009-08-19 user159603

您可以使用單個appendTo或prependTo調用做到這一點（沒有區別哪個） - 只要你可以先建立一個專門訂購jQuery對象。

使用相同的標記作爲Marve的回答是：

$(function() { 
    $('#widgetC'). 
    add('#widgetE'). 
    add('#widgetA'). 
    add('#widgetD'). 
    add('#widgetB'). 
    appendTo('#widgets'); 
});

你可能會需要一個空jQuery對象（使用$([])）開始並遍歷從您的Cookie值，而不是能夠鏈條的事情就像我上面所做的那樣。

其實，想這件事。

$(function() { 
    var order = 'CEADB'; // from cookie 
    $(
    $.map(order.split(''), function(letter) { 
     return $('#widget' + letter); 
    }) 
).appendTo('#widgets'); 
});

來源

2009-08-19 22:22:48 searlea

謝謝...美麗的解決方案在客戶端上測試.......但沒有嘗試使用cookie，因爲我使用jQuery 1.1.2（沒有機會升級），我不認爲餅乾是它的一部分。我會以某種方式找到一種方法。但是你的第一個代碼有效，一旦我得到了cookies，我會嘗試你的底部代碼。 – user159603 2009-08-20 02:13:31

我不認爲有一種jQuery方法可以用來做到這一點，但是您似乎可以通過將每個DIV克隆到變量，從dom中刪除原始文件，很容易地完成此操作，以及附加的克隆版本，返回到所需順序體（用三種標準jQuery方法）：

var thisOne = $('div.thisOne').clone(); 
var thatOne = $('div.thatOne').clone(); 
$('div.thisOne, div.thatOne').remove(); 
$('body').append(thatOne + thisOne);

來源

2009-08-19 21:38:52 RwwL

嗯...感謝您的解決方案，但我有很多的div。如果我這樣去解決這個問題，這將是非常長的解決方案。必須有另一種選擇。 – user159603 2009-08-19 22:20:43

在@ RWL的回答將致力於所示的技術，但你不必從明確刪除元素DOM。使用.append()將元素移動到其新位置。

此HTML：

<div id="widgets"> 
    <div id="widgetA">A</div> 
    <div id="widgetB">B</div> 
    <div id="widgetC">C</div> 
    <div id="widgetD">D</div> 
    <div id="widgetE">E</div> 
</div>

有了這個腳本適用於：

$(function() { 
    var widgetOrder = ['#widgetC','#widgetE','#widgetA','#widgetD','#widgetB']; 
    for (var widgetIndex = 0; widgetOrder.length; widgetIndex++) { 
     var singleWidget = widgetOrder[widgetIndex]; 
     $('#widgets').append($(singleWidget)); 
    } 
});

會導致這個HTML：

<div id="widgets"> 
    <div id="widgetC">C</div> 
    <div id="widgetE">E</div> 
    <div id="widgetA">A</div> 
    <div id="widgetD">D</div> 
    <div id="widgetB">B</div> 
</div>

你應該能夠適應使用jQuery的驗證碼cookie插件，如this或this以滿足您的要求。

來源

2009-08-19 22:10:16 dcharles

嗯，謝謝，我會嘗試這個解決方案並讓你知道。 – user159603 2009-08-19 22:23:25

感謝這個解決方案，但我喜歡搜索答案。我會+1，但我沒有足夠的聲譽..順便說一句，我起訴jQuery的1.1.2，沒有餅乾的工作，我不認爲.. – user159603 2009-08-20 02:14:37

沒有問題。 @searleas有一個精明的答案。 – dcharles 2009-08-20 03:59:28

JQuery在頁面加載時重定位div元素

回答

相關問題