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

Question

我正在使用 Interface 和 JQuery 实现 portlet/widget JQuery 接口。 用户拖放小部件，屏幕就可以处理它。 我可以使用序列化来显示屏幕上 div 元素的顺序。 我可以将其保存在 cookie 或 DB 中 - 但这并不重要。

我的问题是如何加载页面并重新定位 div 以匹配 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

@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 插件（例如 这个或这个来满足您的要求。

Answer 3

我认为没有一个 jQuery 方法可以用来执行此操作，但似乎您可以通过将每个 DIV 克隆到变量、从 dom 中删除原始版本并附加克隆版本来轻松完成此操作按所需顺序返回正文（使用三个标准 jQuery 方法）：

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