Question

我尝试使用jQuery sortable对组进行排序后，重新排列字段组中所有输入字段的名称以及字段组的当前位置。我只需重新排列输入字段名称中的位置编号（基于0），即[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>

而且，这是我到目前为止最接近的。

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属性中的索引号都会更新，以反映新的顺序。

jQuery可排序重新排列输入名称和排序

1 个答案: