jquery要素の位置を保存する（シリアル化？）

Question

divの要素の位置を保存するにはどうすればよいですか？

私はserializeを使用していますか？そうであればどうしますか？あなただけの、あなただけのクッキーの中にIDのカンマ区切りの文字列を栓ができ順番を覚えておく必要がある場合はまあ

<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

私のプロジェクトでも同様の機能を使用しており、注文を復元する準備が整いました。

1. リストコンテナ
2. カンマ区切りのIDを保持しているクッキー：関数は2つのパラメータを取ります。私は私が来た（いくつかのフォーラムやブログからそれを持っていたところ、私が忘れてしまった

   // 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 
   

   ... ULベースのリストを並べ替えるためにそれを使用しますが、あまりにもあなたのケースで正常に動作する必要があります

グーグルリング中にアップ）...しかし、元の著者にクレジット。これらのパラメータを受け入れることで、元のルーチンを少し変更して再利用できるようにしました。

乾杯、 顕微鏡^地球人

Answer 2

：

私はこのdiv要素を持っていますか？そしてそれらをページの読み込み時に取り戻す。

シリアライズは、わかっている限り、フォームデータでのみ動作し、DOM要素では動作しません。あなたのコメントに対処するために

、あなたは簡単なjqueryの使用してページからCSVを構築したい：

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

次にあなたがクッキーにリストを保存するか、またはそれをサーバに送り返すを。

物事を順番に戻すことはやや厳しいものです。文字列をサーバーに送り返すと、正しい順序で物事を出力する方がずっと簡単です...しかし、jqueryのDOMツールを使ってDOMオブジェクトを移動することができます。いずれかの方法で十分に簡単です。