javascript - jQuery 插件 .wrap() 和 .wrapAll() 错误

Question

Note: I've solved major issues with this question however I still do not have working code, since what I am doing now is a completely different issue I will open a new question solve it there and then post the answer to this question. I'll also add the link to the question. You can see my current progress here: 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" />'
});

导致以下错误

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

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

您可以在此处查看我在 jsFiddle 上的 javascript 代码

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

<小时/>

PS: I am trying to follow best practices at all times so if you notice anything even slightly off please let me know and I'll fix the code.

Answer 1

我认为您将 jQuery DOM 函数与数组操作混淆了。没有什么理由将两者链接在 jQuery 原型(prototype)中，因为操作非常独立。

此外，$.fn.build 并不是基于调用原型(prototype)之前创建的元素构建的，而是在其中执行一些 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');