使用以下html和forked js我几乎得到了这个工作但是,我需要将标签引用更改为category1,并且它的内部html将以id等增加
有什么想法吗?
问候皮特
<div class="category" id="category1">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category1">Category1</label>
<select id="Category1" name="Category1" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty1">qty1</label>
<input id="Qty1" name="Qty1" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost1">Cost1</label>
<input id="Cost1" name="Cost1" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total1">Total1</label>
<input id="Total1" name="Total1" type="text" placeholder="" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>
</div>
</div>
我的JS代码:
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".category").length + 1;
$(document).on("click", 'button.clone', function(){
$(this).closest(".category").clone().insertBefore(".before")
.attr("id", "category" + cloneIndex).find("[id], [name]").each(function() {
this.id = this.id.replace(/\d+$/, cloneIndex );
this.name = this.name.replace(/\d+$/, cloneIndex );
});
cloneIndex++;
});
答案 0 :(得分:0)
为此我会采用完全不同的方法并使用HTML模板。
虽然有一些模板库,你可能想要成长为(Handlebars,Mustache,jQuery plugin等等。)一个简单的字符串替换工作正常这个例子。
的 Live Demo 强>
<强> JS 强>
var clone = (function(){
var cloneIndex = 0;
var template = $('#categoryTemplate').text();
return function(){
//Replace all instances of {{ID}} in our template with the cloneIndex.
return template.replace(/{{ID}}/g, ++cloneIndex);
}
})();//self executing function.
var categories = $('#categories')
$(document).on("click", 'button.clone', function(){
categories.append(clone());
});
//Start us off with 1 category.
categories.append(clone());
HTML - 请注意HTML位于text/template
script
标记内。
<script type="text/template" id="categoryTemplate">
<div class="category" id="category{{ID}}">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category{{ID}}">Category{{ID}}</label>
<select id="Category{{ID}}" name="Category{{ID}}" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty{{ID}}">qty{{ID}}</label>
<input id="Qty{{ID}}" name="Qty{{ID}}" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost{{ID}}">Cost{{ID}}</label>
<input id="Cost{{ID}}" name="Cost{{ID}}" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total{{ID}}">Total{{ID}}</label>
<input id="Total{{ID}}" name="Total{{ID}}" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
</script>
<div id='categories'></div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>