jquery sortable> nested uls

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({ 
     update: function() { 
      $.post('/pages/order/0/, $('#pages_0').sortable("serialize", {key: 'pages_0[]'})) 
     } 
    }); 
    $(".sortable-list").disableSelection(); 

그러나, 전송되는 VAR은 물론 'pages_0'입니다.

그래서, 내가 무엇을 시도하고있다 : 그러나

 
    $('ul.sortable-list').each(function() { 
     pid = ''; 
     pid = $(this).attr('id').split('_'); 
     pid = pid[1]; 
     alert(pid); 
     $('#pages_'+pid).sortable({ 
      update: function() { 
       $.post('/pages/order/'+pid, $('#pages_'+pid).sortable("serialize", {key: 'pages_'+pid+'[]'})) 
      } 
     }); 
     $('#pages_'+pid).disableSelection(); 
     alert(pid); 
    }); 

, 내 문제 : 내 경우에하는 것은 : 내가 두 번째 jQuery를 사용하는 경우, 때마다 나는 종류의 난 '11'(pages_11에서, 마지막 UL를 얻을). 당연히 학부모의 이드를 원합니다. 이 문제를 해결하기위한 아이디어가 있습니까? 고마워!

Answer 1

var으로 PID를 정규화하지 않으면 전역 변수가되며 모든 업데이트 기능에 대해 마지막 값이 할당됩니다.

이 시도 :

$('ul.sortable-list').each(function() { 
    var pid = $(this).attr('id').split('_')[1]; 
    alert(pid); 
    $('#pages_'+pid).sortable({ 
     update: function() { 
      $.post('/pages/order/'+pid, $('#pages_'+pid).sortable("serialize", {key: 'pages_'+pid+'[]'})) 
     } 
    }); 
    $('#pages_'+pid).disableSelection(); 
    alert(pid); 
});