jQuery Plugin Error with .wrap() and .wrapAll()

问题

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

I'm writing two basic jQuery plugins, $.fn.query and $.fn.build, that sort an array, and create html code to insert into a document, respectively. I'm currently testing it with Vimeo video ID's that I will display videos with.

The $.fn.query is working fine, and I'm getting an error with the following code

$.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;
};

Then calling (both) functions:

var query = $(example).query({
     shuffle: true,
       limit: 6
}).build({
     wrapAll: '<div class="container" />',
     splitBy: 3,
     wrapRow: '<div class="row" />',
    wrapEach: '<div class="span4" />'
});

Resulting the following error

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Which isn't entirely helpful because it's showing a jQuery error, which seems to exist in a million different places.

You can see my javascript code on jsFiddle here

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.

回答1:

I think you are confusing jQuery DOM functions with Array manipulations. There is little reason to chain both in a jQuery prototype since the operations a very separate.

Also, the $.fn.build does not build upon an element created before the prototype is called, instead you are doing some wrapAll methods inside it. Why not bring an outside container instead and build the DOM structure inside it based on the data?

Try something like:

$.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
    });
}

And then

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

You can also disguise the $.query call inside the plugin:

$.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');

来源：https://stackoverflow.com/questions/12222477/jquery-plugin-error-with-wrap-and-wrapall

标签

javascript

jquery

jquery-plugins