我正在为我的组织创建一个可重复使用的表单脚本。一个功能是复制表单元素。对于这种情况,我要求提供事件日期,但可以选择为事件添加一天。
HTML
<ul>
<li>
<label>Date of event<sup>*</sup></label>
<input class="field-required" type="text" name="event_date" readonly="readonly" />
</li>
<li>
<ul class="float-fields">
<li>
<label>Start time<sup>*</sup></label>
<input class="field-required" type="text" name="event_start_time" data-validation="time" />
</li>
<li>
<label>End time<sup>*</sup></label>
<input class="field-required" type="text" name="event_end_time" data-validation="time" />
</li>
</ul>
</li>
<a class="duplicate-fields" data-fields="all">+ Add date</a>
</ul>
JavaScript (jQuery)
//duplicate fields
$('.duplicate-fields').each(function() {
//put fields in a variable
if($(this).attr('data-fields') == 'all') {
var html = $(this).parent('ul').html();
}
$(this).click(function() {
$($(this).parent('ul')).append(html);
})
});
它现在所做的是复制 ul(所有 li)的 html 并附加它,正如您所期望的那样。我需要做的是排除“.duplicate-fields”链接,这样链接就不会重复,并在现有链接上方插入 li。
我喜欢 .clone() 可以做的事情,但我需要将它放在一个变量中,以便我可以复制不确定数量的字段。使用克隆,我可以说:
var html = $(this).parent('ul').clone();
$(html).find('.duplicate-fields').remove();
但据我了解,如果我使用 clone(),我只能复制一次。 关于我应该怎么做的任何建议?这是可重用的,因为只有 HTML 需要编辑以备将来使用(没有特殊类或 ID)。
最佳答案
尝试使用 for 循环迭代克隆。
更新代码:
$('.duplicate-fields').each(function () {
if ($(this).attr('data-fields') == 'all') {
var noOfClones = 5;
var el = $(this).parent();
for (var i = 0; i < noOfClones; i++) {
var html = el.clone();
html.appendTo('body');
}
}
});
最后,当 a
标签被点击时
$(document).on('click', '.duplicate-fields', function () {
var noOfClones = 5; //you can change it to repeatitve times
var el = $(this).parent();
for (var i = 0; i < noOfClones; i++) {
var html = el.clone();
html.find('a.duplicate-fields').remove(); //remove the a tag in cloned objects
html.appendTo('body'); //append back
}
});
JSFiddle
关于javascript - 使用 jQuery 复制元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20220478/