jquery sortable> uls imbriqués

Question

J'essaye d'imbriquer plusieurs listes dans la liste principale. L'objectif est d'organiser le menu et les sous-menus.

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

Code actuel:

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

Cependant, quand je mets cela, le var qui est envoyé est 'pages_0' bien sûr.

Alors, ce que je suis en train:

 
    $('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); 
    }); 

Cependant, mon problème: dans mon cas: si j'utilise la deuxième jquery, chaque fois que je sorte i get '11' (à partir pages_11, la dernière ul). Je veux l'id du parent ul bien sûr. Des idées pour résoudre cela? THX!

Answer 1

À moins que vous ne qualifiez pid avec var cela va être une variable globale et il aura la dernière valeur qui lui est assignée pour toutes les fonctions de mise à jour.

Essayez ceci:

$('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); 
});