1

注意：我已经解决了这个问题的主要问题，但是我仍然没有工作代码，因为我现在正在做的是一个完全不同的问题，我将在那里打开一个新问题解决它，然后发布这个问题的答案。我还将添加问题的链接。你可以在这里看到我目前的进展：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 错误，它似乎存在于一百万个不同的地方。

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

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

PS：我一直在努力遵循最佳实践，所以如果你发现任何轻微的偏差，请告诉我，我会修复代码。

4

1 回答 1

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');
于 2012-08-31T21:58:18.013 回答