我创建了一个插件,可以克隆元素以进行快速原型制作。该插件将遍历元素上具有“数据克隆”数据属性的每个元素,并在该属性中设置克隆数量。
例子:
<table data-clone="3">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Project</th>
</tr>
</thead>
<tbody>
<tr data-clone="4">
<td>1</td>
<td>Steve Sax</td>
<td>Something here.</td>
</tr>
</tbody>
</table>
这似乎在第一个元素上效果很好。但是,如果我有一个嵌套项目,其中容器被克隆,里面的元素也是如此。似乎它克隆了嵌套项,第一个是外部项,但不会将这些嵌套项克隆到新克隆的外部容器中。
我这里有一个小提琴:小提琴
它有插件和调用。如果您单击“运行”,您应该会明白我的意思。
但是,我觉得如果 .each() 方法首先从嵌套项迭代,然后向上工作,那么所有克隆都是正确的。
提前致谢,
亚当。
这是插件本身供参考。同样,一切都在小提琴中。
/*! Adamin Clone - v0.1.0 - 2012-09-29
* https://github.com/pensive612/Adamin-Clone
* Copyright (c) 2012 Adam L.; Licensed MIT, GPL */
(function(window, document, $, undefined) {
var Project = function(elem, options) {
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('clone-cap');
};
Project.prototype = {
defaults: {
cloneCap: 100
},
init: function() {
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.getCloneValue(this.$elem);
return this;
},
getCloneValue: function(elem) {
var configCap = this.config.cloneCap;
var cloneValue = elem.data('clone');
// parse data-clone value
cloneValue = this.parseCloneValue(cloneValue);
// if data-clone value is valid, send to clone function
if ( cloneValue && (cloneValue < configCap) ) {
this.cloneItem(this.$elem, cloneValue);
// otherwise, return false
} else {
if (cloneValue > configCap) {
window.console.log('Your data-clone value is too high for the defaults. Please check documentation to override cap in config.');
}
return false;
}
},
parseCloneValue: function(value) {
var cloneValue = parseInt(value, 10);
return cloneValue;
},
cloneItem: function(elem, value) {
var elemClone;
for (var i = value; i > 0; i--) {
elemClone = elem.clone(true);
elemClone.removeAttr('data-clone');
elemClone.addClass('clone-' + i);
elemClone.insertAfter(elem);
}
}
};
Project.defaults = Project.prototype.defaults;
$.fn.adaminClone = function(options, callback) {
if (typeof callback === 'function') {
callback.call(this);
}
return this.each(function() {
new Project(this, options).init();
});
};
window.Project = Project;
}(window, document, jQuery));