Question

我有这个，简化了测试，架构：

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0">
        <select name="test1" id="test1_0"></select>
        <select name="test2" id="test2_0"></select>
        <input name="test3" id="test3_0"/>
      </form>
    </div>
  </div>
</div>

我的目标是在容器中克隆该行，同时更改每个_0并将其递增1。

我能够克隆一行，获取该行的数值，并创建另一个ID递增的行。

var div = $('div[class^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );

div.after( clone );

但是我不知道如何将每个具有_0的id更改为_1，有人可以帮助我吗？

小提琴示例：https://jsfiddle.net/L5mn63g7/1/

Answer 1

var $row = $('.row').last(); //Select the row
var num = parseInt($row.attr('id').match(/\d+$/)[0]) + 1; //get the current index
var clone = $row.clone(); //clone the row
clone.attr('id', 'row_' + num); //change its id
clone.children('[id]').each(function() {//go through all elements with an id
    $(this).attr('id', $(this).attr('id').replace(/\d+$/, num)); //change the id
});
clone.appendTo('body'); //append the result to the body (replace 'body' with where you want it)

此代码未经过的测试，可能包含错误或错误。

但是我同意Rory McCrossan的观点：您可以将每行放入具有特定ID的div中，然后使用var $row = $('#div_id'); $row.find('.class')调用内部类（我将其用于包含的表单）

Answer 2

var div = $('div[id^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});  
div.after( clone );

更改所有ID时克隆HTML div

2 个答案: