2

ラピッド プロトタイピング用に要素を複製するプラグインを作成しました。プラグインは、要素に 'data-clone' の data-attribute を持つ各要素と、属性に設定された複製量を反復処理します。

例：

<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

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

親（）。lengthを使用することは、深さを測定するための優れた方法です。ComputerArtsとShokyに、必要な場所に連れて行ってくれてありがとう。

于 2012-09-30T04:11:15.453 に答える
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 つが画面に表示されます (1 つが既に存在するため)。forループで正確に4が必要な場合

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