jquery sortable>嵌套的uls

时间:2009-06-05 21:17:17

标签: jquery list nested jquery-ui-sortable

我正在尝试在主列表中嵌套多个列表。目标是组织菜单和子菜单。

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)。我当然想要父ul的id。解决这个问题的任何想法? THX!

1 个答案:

答案 0 :(得分:2)

除非您使用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);
});