2

我目前遇到以下问题，我想更优雅地解决这个问题：

我的脚本工作如下：

  1. 接受一个元素
  2. 通过使用将元素放入容器（定义为var container = $('<div></div>'）.append()
  3. 跟踪容器“装满”的距离
  4. 如果容器已满，则换clone一个新容器并继续那里
  5. 重复此操作，直到处理完每个元素

现在，这需要我跟踪一个“填充”（和一个“最大值”）变量来确定容器被填充了多远。所以每次我做一个append()，我都必须增加这些计数器。

现在，对我来说更优雅的是让container对象变得智能，并使其能够“挂钩”到append()事件中：每当附加一些东西时，容器对象本身就会执行一些代码（增加它自己的计数器，决定它是否已满，如果是，则返回一个新的空容器）。

我想通过创建一个返回容器的函数来解决这个问题：

var container = {
    template : $('<div class="container"></div>'),
    containers : [],
    get : function (i) {
        if (!this.containers[i]) {
            this.containers[i] = this.template.clone()
                .addClass('container-'+i)
                .data('max', 500); //this determines the maximum (px) the container can hold
        }
        return this.containers[i];
    }
};

这很有效，因为我现在可以遍历所有元素，并调用container.get(i).append(element)每个元素（同时单独计算高度并将其与 进行比较container().get(i).data().max），稍后在脚本中，当我需要输出时，我可以返回container.containers对象。

但是我无法让它具有container.get“监视”append()并对其采取行动的功能。我知道这不是 jQuery 的工作方式，但我确信除了在元素迭代器中保留本地计数器之外，还有另一种方法。

我尝试的另一件事是尝试.on($.append, function() { //do stuff });在容器上设置，但那是一个白日梦..

我希望我已经清楚地解释了一切，并且很想知道是否有人对此有解决方案。

请参阅this fiddle以获取“工作”示例（我高度怀疑我的编程技能）

4

1 回答 1

2

也许你需要这样的东西：

(function($)
{
    var oldappend = $.fn.append;
    var count = 0;

    $.fn.newAppend = function()
    {
        var ret = oldappend.apply(this, arguments);
        //your logic goes here 
        // count++;            

        return ret;
    };
})(jQuery);

或者您需要存储每个容器的计数变量：

(function($)
    {
        var oldappend = $.fn.append;

        $.fn.newAppend = function()
        {
            var ret = oldappend.apply(this, arguments);
            //your logic goes here 
            if (!this.count){
                this.count = 0;
            }
            this.count++;

            return ret;
        };
    })(jQuery);

用它：

$('<div class="container"></div>').newAppend(yourElement);
于 2013-05-23T09:40:25.290 回答