Question

我正在使用Interface和JQuery实现一个portlet / widget JQuery接口。用户拖放小部件，屏幕可以处理它。我可以使用serialize来显示屏幕上div元素的顺序。我可以将它保存在cookie或DB中 - 这无关紧要。

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

我可以调用哪种JQuery方法能够按照我想要的顺序重新定位div吗？

Answer 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插件（例如this或this）来调整此代码，以满足您的要求。

Answer 2

您可以使用单个appendTo或prependTo调用（没有区别） - 只要您可以首先构建一个特别有序的jQuery对象。

使用与Marve的答案相同的标记：

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

你可能需要从一个空的jQuery对象开始（使用$([])）并迭代你的cookie中的值，而不是像我上面那样链接的东西。 / p>

实际上，想一想......

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

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);

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

3 个答案: