使用jQuery排序後重新編號輸入標記名稱字段

Question

我正在使用jQuery的可排序方法重新排序輸入標記組。這些標籤的名稱屬性的格式爲foo[n]（當組中有一個輸入時）或foo[n][fieldname]（組中有多個輸入），其中n是某個數字。

我遇到的問題是，當整體表單被提交時，由PHP代碼存儲在數據庫中的輸入組的順序是按照索引的順序，而不是按照屏幕上的順序。我需要更新名稱索引以反映屏幕排序順序的結果。我不確定如何做到這一點。 jQuery的文檔不是特別有用。

生成的HTML會是這個樣子：

<ul id="deepwoods_meta_rightbutton-repeatable" class="deepwoods_metabox_repeatable"> 
    <li><span class="sort hndle">||</span><textarea name="deepwoods_meta_rightbutton[0]" id="deepwoods_meta_rightbutton" cols="60" rows="4">(some text)</textarea><a class="repeatable-remove button" href="#">-</a></li> 
    <li> (same as above, except [0] replaced with [1]) </li> 
    ... 
    <li> (same as above, except [0] replaced with [n]) </li> 
</ul> 

或者它可能是這樣的：

<ul id="deepwoods_meta_buybuttons-repeatable" class="deepwoods_metabox_repeatable"> 
    <li><span class="sort hndle">||</span> 
    <div class="form-table deepwoods-metabox div-as-table"> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Link</label</span> 
      <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thelink]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Button</label></span> 
      <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thebutton]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Text</label></span> 
      <span class="span-as-td"><textarea name="deepwoods_meta_buybuttons[0][text]" id="deepwoods_meta_buybuttons" cols="60" rows="4">...</textarea></span></div></div><a class="repeatable-remove button" href="#">-</a></li> 
    <li> (much like the previous list item, but [0] replaced with [1]) </li> 
    ... 
    <li> nth ([n]) item </li> 
</ul> 

也就是說每個排序列表中的項目可以包含一個單一的輸入字段（輸入，textarea或選擇標籤），或者每個列表項可以包含一組輸入，textarea或選擇的項目。可以把它看作是一個簡單的定標器值向量或者一個對象值向量。

我在窗體中有多個（可單獨排序）塊。我使用的jQuery代碼皮爾斯看起來像：

jQuery('.deepwoods_metabox_repeatable').sortable({ 
      opacity: 0.6, 
      revert: true, 
      cursor: 'move', 
      handle: '.sort', 
      containment: 'parent' 
}); 

我想我需要添加一個更新事件處理程序，但我不知道如何從那裏PROCEDE。 jQuery文檔不清楚（對我來說）。

Answer 1

你有兩個選擇：

取下input標籤和形式的所有索引將默認送他們爲了

OR

使用stop事件更改名稱：

jQuery('.deepwoods_metabox_repeatable').sortable({ 
    stop: function (event, ui) { 
     updateNames($(this)) 
    } 
}) 

function updateNames($list) { 
    $list.find('li').each(function (idx) { 
     var $inp = $(this).find('input'); 
     $inp.each(function() { 
      this.name = this.name.replace(/(\[\d\])/, '[' + idx + ']');    
     }) 
    }); 
} 

DEMO：http://jsfiddle.net/gszfD/

Answer 2

經過幾個小時與Firebug的徘徊，我制定了一個似乎可行的解決方案。可能不是特別優雅，可能過於冗長。

jQuery('.deepwoods_metabox_repeatable').sortable({ 
    opacity: 0.6, 
    revert: true, 
    cursor: 'move', 
    handle: '.sort', 
    containment: 'parent', 
    update: function(event,ui){ renumber(ui.item); } 
}); 

function renumber(item) { 
    ul = item[0].parentNode; 
    jQuery('li',ul).each(function(index,element) { 
    renumber_helper(index,element); 
    }); 
} 

function renumber_helper(index,element) { 
    inputs = jQuery('input', element); 
    for (j = 0; j < inputs.length; j++) { 
    input = inputs[j]; 
    name = input.name; 
    input.name = name.replace(/(\d+)/,index); 
    } 
    textareas = jQuery('textarea',element); 
    for (j = 0; j < textareas.length; j++) { 
    textarea = textareas[j]; 
    name = textarea.name; 
    textarea.name = name.replace(/(\d+)/,index); 
    } 
    selects = jQuery('select',element); 
    for (j = 0; j < selects.length; j++) { 
    select = selects[j]; 
    name = select.name; 
    select.name = name.replace(/(\d+)/,index); 
    } 
}