0

我正在使用 Interface 和 JQuery 实现一个 portlet/widget JQuery 接口。用户拖放小部件，屏幕可以处理它。我可以使用序列化来显示屏幕上 div 元素的顺序。我可以将它保存在 cookie 或数据库中——这还没有关系。

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

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

4

3 回答 3

1

@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 插件来调整此代码以满足您的要求。

于 2009-08-19T22:10:16.297 回答
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');
});
于 2009-08-19T22:22:48.110 回答
0

我不认为有一个单一的 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-19T21:38:52.303 回答