jQuery with AJAX：複数出力

Question

JSONフィード（この場合はYouTube）を取得するjQueryプラグインを作成しました。結果はDIVに表示されます。2つ以上のコンテナに結果（異なる設定、つまり他のチャンネル、他のチャンネル）を表示するには、どうすればよいでしょうか？

btw ...これは私の質問の正しいタイトルですか？私はここで

:)はるかにjQuery/JSの専門家ではない私のコードは、これまでのところである - 私は基本的なアクションと初歩的な出力にそれを短縮：私は$('#main').youtubeVideos();それを呼び出したときに今

(function($){ 
    // Default settings 
    var settings = { 
     author:  'ARD', 
     results: 3 
    }; 

    // Append to Container 
    var append_to_container; 

    // The Methods 
    var methods = { 
     // Initate 
     init: function(options){ 
      append_to_container = $(this); 

      $.extend(settings, options); 
      methods.grabFeed(); 
     }, 

     // Grab feed 
     grabFeed: function(){ 
      $.ajax({ 
       url: 'http://gdata.youtube.com/feeds/api/videos', 
       data: { 
        author: settings.author, 
        v: '2', 
        alt: 'jsonc', 
        'max-results': settings.results 
       }, 
       dataType: 'jsonp', 
       success: function(data){ 
        methods.gotResults(data); 
       } 
      }); 
     }, 

     // Placeholder for results 
     gotResults: function(data){ 
      console.log(data); 
      $("<h1>Success!</h1>").appendTo(append_to_container); 
     } 
    }; 


    $.fn.youtubeVideos = function(method){ 
     // Method calling logic 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.youtubeVideos'); 
     } 
    } 

})(jQuery); 

期待どおりに動作します。

しかし、私は結果を複数のDOM要素で表示したいと思います。だから私は例を呼ぶとき：

$('#main').youtubeVideos(); 
$('#same_videos').youtubeVideos(); 

それはを示す成功！メッセージを2回目の呼び出しで使用したコンテナに2回挿入します。

私はstackoveflowとウェブからいくつかの回答を試みましたが、私の機能を複数回使用する方法は見つけられません。 複数のコンテナでプラグインを複数回使用するにはどうすればよいですか？

---

EDIT /ソリューション

ここCodemonkeyから先端の後に私のソリューションです：

(function($){ 

    $.fn.youtubeVideos = function(method){ 

     // Default settings 
     var settings = { 
      author:  'ARD', 
      results: 3 
     }; 

     // Append to Container 
     var append_to_container; 

     // The Methods 
     var methods = { 
      // Initate 
      init: function(options){ 
       append_to_container = $(this); 

       $.extend(settings, options); 
       methods.grabFeed(); 
      }, 

      // Grab feed 
      grabFeed: function(){ 
       $.ajax({ 
        url: 'http://gdata.youtube.com/feeds/api/videos', 
        data: { 
         author: settings.author, 
         v: '2', 
         alt: 'jsonc', 
         'max-results': settings.results 
        }, 
        dataType: 'jsonp', 
        success: function(data){ 
         methods.gotResults(data); 
        } 
       }); 
      }, 

      // Placeholder for results 
      gotResults: function(data){ 
       console.log(data); 
       $("<h1>Success!</h1>").appendTo(append_to_container); 
      } 
     }; 


     // Method calling logic 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.youtubeVideos'); 
     } 
    } 

})(jQuery); 

$('#main').youtubeVideos(); 
$('#same_videos').youtubeVideos(); 

Answer 1

に、すべての機能を置くことによって：

それだ

$.fn.youtubeVideos = function(method){ ... 

。その関数のコンテキストは、プラグイン関数を実行するたびに一意になります。プラグイン関数の複数の呼び出しでjQueryオブジェクトにデータを保持する必要がある場合は、jQuery.dataを使用します。あなたが行くのが良いこと以外は。

いくつかのjQueryプラグインの例（Pick and choose）を調べて、その動作を確認してください。