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

Question

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

我正在编写两个基本的jQuery插件，$.fn.query和$.fn.build，它们对数组进行排序，并分别创建html代码以插入文档。我目前正在用Vimeo视频ID测试它，我将用它来显示视频。

$.fn.query运行良好，下面的代码出错了

$.fn.build = function(params) {

    // Parameters //
    var options = $.extend( {
            'wrapAll'  : undefined,
            'splitBy'  : undefined,
            'wrapRow'  : undefined,
            'wrapEach' : '<div>'
        }, 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: '<div class="container" />',
     splitBy: 3,
     wrapRow: '<div class="row" />',
    wrapEach: '<div class="span4" />'
});

导致以下错误

未明错误: NOT_FOUND_ERR: DOM异常8

这并不完全有用，因为它显示了一个jQuery错误，这个错误似乎存在于million different places中。

您可以在这里看到我在jsFiddle上的javascript代码

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

PS:，我一直在尝试遵循最佳实践，所以如果您注意到任何轻微的错误，请告诉我，我会修复代码。

Answer 1

我认为您混淆了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
    });
}

然后

$('<div>').addClass('container').build( $.query(example), {
    splitBy: 3,
    wrapRow: '<div class="row" />',
    wrapEach: '<div class="span4" />' 
}).appendTo('body');

您还可以在插件中隐藏$.query调用：

$.fn.build = function(options) {
    options.data = $.query( options.data );
    // etc

$('<div>').addClass('container').build({
    data: example,
    splitBy: 3,
    wrapRow: '<div class="row" />',
    wrapEach: '<div class="span4" />' 
}).appendTo('body');