JQuery在页面加载时重定位div元素

Question

我正在使用Interface和JQuery实现portlet /小部件JQuery接口。用户拖放小部件并在屏幕上处理它。 我能够使用serialize显示屏幕上div元素的顺序。 我可以将它保存在一个cookie或数据库中 - 这并不重要。

我的问题是如何加载页面重新定位divs以匹配cookie/DB中的顺序？一个基于cookie的例子会很好，但它并不重要。

是否有某种JQuery方法可以调用，能够按照我希望它们的顺序重新定位div？

Answer 1

您可以使用单个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'); 
});

Answer 2

我不认为有一种jQuery方法可以用来做到这一点，但是您似乎可以通过将每个DIV克隆到变量，从dom中删除原始文件，很容易地完成此操作，以及附加的克隆版本，返回到所需顺序体（用三种标准jQuery方法）：

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

Answer 3

在@ 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以满足您的要求。