可排序不改变 id

Question

我希望能够在拖放时用另一个替换所有 ID。

例如在这段代码中：

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
  <div class="row" id="row_1">
    <div class="col-md-12">
      <form id="form_1" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_1">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_1">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

我希望拖放所有的时候都能改变id="form_0" <-> id="form_1",id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" ..等等，这只是一个例子，还有更多。

我知道我们可以像这样使用 stop 选项 :

$('.container').sortable({
  stop: function(event, ui) {
    var moved = ui.item,
      replaced = ui.item.prev();

    if (replaced.length == 0) {
      replaced = ui.item.next();
    }

    var moved_num = parseInt(moved.attr("id").match(/\d+/g), 10) + 1;
    var replaced_num = parseInt(replaced.attr("id").match(/\d+/g), 10) + 1;

    moved.find('[id]').each(function() {
      var $this = $(this),
        split = $this.prop('id').split('_')[0];
      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);
    });
    replaced.find('[id]').each(function() {
      var $this = $(this),
        split = $this.prop('id').split('_')[0];
      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);
    });

  }
});

上面代码中的想法是获取移动和替换的那个的 ID 号，并且对于每个 ID，在每个 ID 中替换另一个的编号。

但它并没有做我想做的事情。知道为什么吗？

Fiddle : https://jsfiddle.net/763opz0c/

Answer 1

我的建议是遍历所有项目并使用它们在容器中的索引来更新所有 id

$('.container').sortable({
  stop: function(event, ui) {
     var $items = $(ui.item).parent().children()
     $items.each(function(index){
         $(this).find('[id]').add(this).attr('id', function(){
             return this.id.split('_')[0] +'_' + index 
         });
     });     
  }
});

Fiddle demo

可排序不改变 id

Sortable not changing ids

javascript

jquery

jquery-ui

jquery-ui-sortable