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元素

回答

相关问题