Question

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

示例：

<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>

这似乎在第一个元素上运作良好。但是，如果我有一个嵌套项目，其中克隆容器，内部元素也是如此。它似乎克隆嵌套的项目，而第一个的外部，但不会将这些嵌套的项目克隆到新克隆的外部容器中。

我有一个小提琴：Fiddle

它有插件和电话。如果单击“运行”，您应该看到我的意思。

但是，我觉得如果.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));

Answer 1

好的，所以我找到了适合你的东西。

Check this simplified fiddle

基本上你从最深的元素开始克隆并向上移动。评论在代码中。

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循环jut put

for (var c = 0; c < parseInt(element.attr('data-clone') - 1); c++) {

Answer 2

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();
  });

使用parent（）。长度是衡量深度的好方法。感谢ComputerArts和Shoky将我带到了我需要的地方。

如何控制我的jQuery插件使用.each（）迭代的顺序？

2 个答案: