即时创建方法

Question

嗨,我正在尝试创建一个jQuery插件,我需要在将元素初始化为那种对象后才能访问元素,例如:

$('.list').list({some options}); //This initializes .list as a list

//now I want it to have certain methods like:
$('.list').find('List item'); //does some logic that I need

我试过了

$.fn.list = function (options) {
    return this.each(function() {
        // some code here
        this.find = function(test) {
            //function logic
        }
    }
}

和其他几个不同的尝试,我只是无法弄清楚如何做到这一点.

编辑:

我会试着更好地解释一下.

我正在尝试将表格转换为列表,基本上就像计算机上的列表,列表标题和可排序项目以及中间的所有内容.您使用类似命令启动表

$(this).list({
    data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}]
});

.list将进行<tbody>可排序并执行一些其他初始任务,然后将以下方法添加到元素:
.findItem(condition)将允许您按条件查找某个项目(如findItem('name == "Second"')
.list(condition)将列出与给定条件匹配的
.sort(key)所有项目将按给定条件对所有项目进行排序钥匙
等

这样做的最佳方法是什么？

Answer 1

我在这里找到了这个解决方案： http://www.virgentech.com/blog/2009/10/building-object-orient-jquery-plugin.html

这似乎正是我所需要的。

(function($) {
    var TaskList = function(element, options)
    {
        var $elem = $(element);
        var options = $.extend({
            tasks: [],
            folders: []
        }, options || {});

        this.changed = false;
        this.selected = {};

        $elem.sortable({
            revert: true,
            opacity: 0.5
        });

        this.findTask = function(test, look) {
            var results = [];

            for (var i = 0,l = options.tasks.length; i < l; i++)
            {
                var t = options['tasks'][i];
                if (eval(test))
                {
                    results.push(options.tasks[i]);
                }
            }
            return results;
        }

        var debug = function(msg) {
            if (window.console) {
                console.log(msg);
            }
        }
    }

    $.fn.taskList = function(options)
    {
        return this.each(function() {
            var element = $(this);

            if (element.data('taskList')) { return; }

            var taskList = new TaskList(this, options);

            element.data('taskList', taskList);

        });
    }

})(jQuery);

然后我有

    $('.task-list-table').taskList({
        tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'),
        folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)')
    });
    var taskList = $('.task-list-table').data('taskList');

我可以用taskList.findTask(condition);

而且由于构造函数具有$elem我还可以编辑 jQuery 实例的方法list(condition)等。这非常有效。