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> 

であるとされている入力フィールドのname内の位置番号を（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属性のインデックス番号が更新され、新しい順序が反映されます。