Question

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

我的脚本如下：

采取元素
使用var container = $('<div></div>'

.append()

跟踪容器的填充距离＆＃39;
如果容器已满，clone新容器并继续
重复此操作直到处理完每个元素

现在，这需要我跟踪“填充”字样。（以及一个＆＃39; max＆＃39;）变量来确定容器已填充多远。因此，每次执行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功能来观察＆＃39;对于append()并采取行动。我知道这不是jQuery的工作方式，但我确信除了在元素迭代器中保留本地计数器之外，还有另一种方法。

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

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

See this fiddle ，对于工作人员来说，＆＃39;例子（我非常怀疑我的编程技巧）

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

对象'挂钩'到jQuery函数，可能吗？

1 个答案: