jQuery Sortable重新排列輸入名稱和排序

Question

我想重新排列字段組中的所有輸入字段的名稱與字段組的當前位置後排序組用jQuery排序。我只是要重新安排都[0]，[1]，[2]，[4]，[4]等

下面是基本的HTML

<div class="sortable"> 
    <div class="field-group"> 
     <div class="accordian-header"></div> 
     <div> 
      <input type="text" name="section[0]text" value=""> 
      <textarea name="section[0]textarea"></textarea> 
      <input type="checkbox" name="section[0]check" value="1"> 
     </div> 
    </div> 
    <div class="field-group"> 
     <div class="accordian-header"></div> 
     <div> 
      <input type="text" name="section[1]text" value=""> 
      <textarea name="section[1]textarea"></textarea> 
      <input type="checkbox" name="section[1]check" value="1"> 
     </div> 
    </div> 
    <div class="field-group"> 
     <div class="accordian-header"></div> 
     <div> 
      <input type="text" name="section[2]text" value=""> 
      <textarea name="section[2]textarea"></textarea> 
      <input type="checkbox" name="section[2]check" value="1"> 
     </div> 
    </div> 
    <div class="field-group"> 
     <div class="accordian-header"></div> 
     <div> 
      <input type="text" name="section[3]text" value=""> 
      <textarea name="section[3]textarea"></textarea> 
      <input type="checkbox" name="section[3]check" value="1"> 
     </div> 
    </div> 
    <div class="field-group"> 
     <div class="accordian-header"></div> 
     <div> 
      <input type="text" name="section[4]text" value=""> 
      <textarea name="section[4]textarea"></textarea> 
      <input type="checkbox" name="section[4]check" value="1"> 
     </div> 
    </div> 
</div> 

和位置數（0基於）在輸入字段的名字，這裏是我到目前爲止距離最近。

jQuery(document).ready(function($) { 
    $('.sortable').each(function() { 
     $(this).accordion({ 
      header: '> .field-group > .accordian-header', 
      collapsible: true, 
      active: false, 
      animate: 300, 
     }).sortable({ 
      revert: true, 
      axis: 'y', 
      handle: '.accordian-header', 
      stop: function(event, ui) { 
       ui.item.children('.accordian-header').triggerHandler('focusout'); 
       $(this).accordion('refresh'); 
       $.map($(this).find('.field-group'), function(el) { 
        var inputs = $(this).find('input'); 
        inputs.each(function() { 
         this.name = this.name.replace(/(\[\0-9\])/, '[' + $(el).index() + ']'); 
        }); 
        //console.log($(el).index()); 
       }); 
      }, 
     }); 
    });  
}); 

我也嘗試了很多答案，但沒有運氣。這是我用我的代碼做的最新的小提琴。

http://jsfiddle.net/itsabhik/oj3awz78/3/

我怎樣才能做到這一點？

Answer 1

我會用$(".field-group").each()來代替。工作示例：http://jsfiddle.net/Twisty/fhmgrjuq/

片段

 stop: function(event, ui) { 
     ui.item.children('.accordian-header').triggerHandler('focusout'); 
     $(this).accordion('refresh'); 

     var i = 0; 
     $('.field-group').each(function(k, el) { 
      $(el).find("input").attr("name", 'section[' + i + ']text'); 
      $(el).find("textarea").attr("name", 'section[' + i + ']textarea'); 
      $(el).find("checkbox").attr("name", 'section[' + i + ']check'); 
      i++; 
     }); 
     } 

我懷疑它可以得到改善。這就像你描述的那樣。每次排序後，每個輸入元素的name屬性中的索引號會更新以反映新訂單。