1

注：私はこの質問で大きな問題を解決しましたが、まだ動作するコードがありません. また、質問へのリンクを追加します。ここで私の現在の進捗状況を確認できます: http://jsbin.com/upatus/2/edit

私は 2 つの基本的な 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

100 万の異なる場所に存在するように見える jQuery エラーが表示されているため、これは完全には役に立ちません。

こちらのjsFiddleで私のjavascriptコードを見ることができます

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

PS:私は常にベスト プラクティスに従うように努めているので、少しでも何かおかしいことに気付いた場合はお知らせください。コードを修正します。

4

1 に答える 1

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