对象“挂钩”到 jQuery 函数中，可能吗？

Question

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

我的脚本工作如下：

1. 获取一个元素
2. 使用.append()将元素放入容器（定义为var container = $('<div></div>'）
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 });，但那是一个白日梦..

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

See this fiddle 一个“有效”的例子（我非常怀疑我的编程技能）

Answer 1

也许你需要这样的东西：

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