jquery - jqueryソート可能>ネストされたul

Question

メインリスト内にいくつかのリストをネストしようとしています。目標は、メニューとサブメニューを整理することです。

html:

<ul id="pages_0" class="sortable-list">
  <li id="page_14">home
    <ul id="pages_14" class="sortable-list">
      <li id="page_21">nieuwsarchief</li>
      <li id="page_19">waarom bouwelement</li>
      <li id="page_20">vacatures</li>
    </ul>
  </li>
  <li id="page_23">ondersteuning
    <ul id="pages_23" class="sortable-list">
      <li id="page_24">brochures</li>
      <li id="page_25">constructie</li>
    </ul>
  </li>
  <li id="page_18">producten</li>
  <li id="page_26">contact</li>
  <li id="page_28">referenties</li>
  <li id="page_11">projectaanpak
    <ul id="pages_11" class="sortable-list">
      <li id="page_15">advies</li>
      <li id="page_13">productie</li>
      <li id="page_12">tekenwerk</li>
    </ul>
  </li>
</ul>

現在のコード:

    $(".sortable-list").sortable({
        更新: 関数() {
            $.post('/pages/order/0/, $('#pages_0').sortable("serialize", {key: 'pages_0[]'}))
        }
    });
    $(".sortable-list").disableSelection();

ただし、これを設定すると、送信される変数はもちろん「pages_0」です。

だから、私がしようとしていること：

    $('ul.sortable-list').each(関数() {
        pid = '';
        pid = $(this).attr('id').split('_');
        pid = pid[1];
        アラート (pid);
        $('#pages_'+pid).sortable({
            更新: 関数() {
                $.post('/pages/order/'+pid, $('#pages_'+pid).sortable("serialize", {key: 'pages_'+pid+'[]'}))
            }
        });
        $('#pages_'+pid).disableSelection();
        アラート (pid);
    });

ただし、私の問題: 私の場合: 2 番目の jquery を使用すると、並べ替えるたびに '11' が得られます (pages_11 から、最後の ul)。もちろん、親ulのIDが必要です。これを解決するためのアイデアはありますか？どうも！