jquery 保存元素位置（序列化？）

Question

如何保存 div 中的元素位置？

我是否使用序列化，如果是，我该怎么做？

我有这个div：

<div id="produtlist">
    <img id="productid_10" src="images/pic10.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_11" src="images/image1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_12" src="images/image2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_13" src="images/pic1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_14" src="images/pic2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_15" src="images/pic3.jpg" class="sortableproduct" alt="" title="" />
</div>

Answer 1

我在我的一个项目中使用了类似的函数，并且我已经准备好一段代码来恢复排序。 该函数有 2 个参数：

1. 列表容器
2. 保存逗号分隔 ID 的 cookie。

我用它来重新排序基于 ul 的列表，但在你的情况下也应该可以正常工作...

// Function that restores the list order from a cookie
function restoreOrder( _list, _cookie ) {

    var list = $( '#' + _list );
    if( list == null ) return;

    // fetch the cookie value (saved order)
    var cookie = $.cookie( _cookie );

    if( !cookie ) return;

    // make array from saved order
    var IDs = cookie.split( "," );

    // fetch current order
    var items = list.sortable( "toArray" );

    // make array from current order
    var rebuild = new Array();
    for( var v = 0, len = items.length; v < len; v++ )
        rebuild[items[v]] = items[v];

    for( var i = 0, n = IDs.length; i < n; i++ ) {

        // item id from saved order
        var itemID = IDs[i];

        if( itemID in rebuild ) {

            // select item id from current order
            var item = rebuild[itemID];

            // select the item according to current order
            var child = $( '#' + _list ).children( '#' + item );

            // select the item according to the saved order
            var savedOrd = $( '#' + _list ).children( '#' + itemID );

            // remove all the items
            child.remove();

            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $( '#' + _list ).filter( ':first' ).append( savedOrd );

        } // if

    } // for

} // restoreOrder

我忘记了我从哪里得到它的（谷歌搜索时出现的一些论坛或博客）...但应归功于原始内容作者。 我对原始例程进行了一些修改，通过接受这些参数使其更加可重用。

干杯，
微观^地球

Answer 2

好吧，如果您只需要记住顺序，您可以将逗号分隔的 id 字符串插入 cookie 中吗？ 并在页面加载时将它们拉回。

据我所知，序列化仅适用于表单数据，不适用于 DOM 元素。

为了解决您的评论，您可以使用简单的 jquery 从页面构建一个 CSV：

var list = '';
$('#productlist .sortableproduct').each(function() {
    list += this.attr('id') + ',';
});

然后将列表保存到 cookie，或将其发送回服务器。

将事情恢复到原来的顺序有点困难。 如果将字符串发送回服务器，那么以正确的顺序输出内容会简单得多...但是您可以使用 jquery 中的 DOM 工具来移动 DOM 对象。 无论哪种方式都很简单。