.wrap()和.wrapAll()的jQuery插件错误

注意:我已经解决了这个问题的主要问题,但是我仍然没有工作代码,因为我现在正在做的是一个完全不同的问题我将打开一个新问题在那里解决然后发布这个问题的答案。 我还要添加问题的链接。 您可以在此处查看我当前的进度: http : //jsbin.com/upatus/2/edit

我正在编写两个基本的jQuery插件, $.fn.query$.fn.build ,它们对一个数组进行排序,并创建html代码以分别插入到文档中。 我目前正在使用VimeovideoID测试它,我会用它来显示video。

$.fn.query工作正常,我收到以下代码的错误

 $.fn.build = function(params) { // Parameters // var options = $.extend( { 'wrapAll' : undefined, 'splitBy' : undefined, 'wrapRow' : undefined, 'wrapEach' : '
' }, params), build; // Wrap Each // if (options.wrapEach !== undefined) { build = this.wrap(options.wrapEach); } // Split into Rows // if (options.splitBy !== undefined && options.wrapRow !== undefined) { var tmp; for (var i = build.length; i > 0; i -= 3) { tmp = build.splice(i, i + 3).wrapAll(options.wrapRow); } build = tmp; } // Wrap All // if (options.wrapAll !== undefined) { build = build.wrapAll(options.wrapAll); } // Return Build // return build; };

然后调用(两个)函数:

 var query = $(example).query({ shuffle: true, limit: 6 }).build({ wrapAll: '
', splitBy: 3, wrapRow: '
', wrapEach: '
' });

导致以下错误

未捕获错误:NOT_FOUND_ERR:DOMexception8

这并不完全有用,因为它显示了一个jQuery错误,它似乎存在于数百万个不同的地方 。

你可以在jsFiddle上看到我的javascript代码

http://jsfiddle.net/JamesKyle/PK2tF/


PS:我一直在努力遵循最佳实践,所以如果你发现任何稍微偏离的东西请告诉我,我会修复代码。

我认为你正在混淆jQuery DOM函数与数组操作。 由于操作非常独立,因此没有理由在jQuery原型中进行链接。

此外, $.fn.build不会在调用原型之前创建的元素上构建,而是在其中执行一些wrapAll方法。 为什么不改为使用外部容器并根据数据在其中构建DOM结构?

尝试以下方法:

 $.query = function(data, options) { // do the array thingie with data return data; }; $.fn.build = function(data, options) { return this.each(function() { // do the DOM thingies based on data and the context element. // don't use wrapAll, bring an outside element instead }); } 

然后

 $('
').addClass('container').build( $.query(example), { splitBy: 3, wrapRow: '
', wrapEach: '
' }).appendTo('body');

您还可以伪装插件中的$.query调用:

 $.fn.build = function(options) { options.data = $.query( options.data ); // etc $('
').addClass('container').build({ data: example, splitBy: 3, wrapRow: '
', wrapEach: '
' }).appendTo('body');