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中替换另一个ID。

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

提琴：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

1 个答案: