2

我创建了一个插件，可以克隆元素以进行快速原型制作。该插件将遍历元素上具有“数据克隆”数据属性的每个元素，并在该属性中设置克隆数量。

例子：

<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));
4

2 回答 2

0

好的，所以我有东西给你。

检查这个简化的小提琴

基本上，您从最深的元素开始克隆并向上。注释在代码中。

var elements = $.find('[data-clone]'); //get all the elements that need to be cloned
var elementsData = []; //will store and sort the elements

//store the elements with their depth
$.each(elements, function(i, element) {

    var obj = {};
    obj.element = $(element);
    obj.depth = $(element).parents().length;

    elementsData.push(obj);

    // This can be optimized, it's just easier to understand the code.
    // Alternatively use 
    // elementsData.push({ element : $(element), depth : $(element).parents().length }); 
})

//sort them by deepest element
elementsData.sort(SortByDepth);


$.each(elementsData, function(i, elementData) {
    var element = elementData.element;

    //clone ot the number of times wanted.
    for (var c = 0; c < element.attr('data-clone'); c++) {
        element
            .clone(true)
            .removeAttr('data-clone')
            .addClass('clone-' + c).
            insertAfter(element);
    }
})

//function that sorts the elements;
function SortByDepth(a, b){
  var aDepth = a.depth;
  var bDepth = b.depth;
  return ((aDepth > bDepth) ? -1 : ((aDepth < bDepth) ? 1 : 0));
}

注意：在 data-clone=4 中，脚本将克隆它 4 次，因此屏幕上总共有 5 个（因为已经存在一个）。你想要 4，在 for 循环中插入

for (var c = 0; c < parseInt(element.attr('data-clone') - 1); c++) {
于 2012-09-30T01:33:44.660 回答
0

ComputerArts 在重写函数方面做得非常出色。但是，我只需修改以下内容即可维护插件模式和可扩展性：

return this.each(function() {
  new Project(this, options).init();
});

对此：

  return this.sort(function(a, b) {
    var va = $(a).parents('[data-clone]').length;
    var vb = $(b).parents('[data-clone]').length;
    return vb - va;
  }).each(function() {
      new Project(this, options).init();
  });

使用 parents().length 是测量深度的好方法。感谢 ComputerArts 和 Shoky 将我带到了我需要的地方。

于 2012-09-30T04:11:15.453 回答