解析一些jQuery函數

Question

我是jQuery/JavaScript的新手，所以請原諒我的事情沒有意義。

我寫了下面的函數。

$.fn.getFeed = function(feedXML) { 
    $.ajax({ 
     type: "GET", 
     url: feedXML, 
     dataType: "xml", 
     success: function(xml) { 
      $(xml).find('item').each(function(){ 
       var title = $(this).find('title').text(); 
       var url = $(this).find('link').text(); 
       $(this).html('<li><a href="'+url+'">'+title+'</a>').appendTo('#feed-1'); 
      }); 
     } 
    }); 
}; 

但我希望能夠調用/使用此功能領帶特定ID，例如說

$('#feed-1').getFeed('foo.xml'); 
$('#feed-2').getFeed('bar.xml'); 

然後在我的HTML我有這樣的事情。

<ol id="feed-1"></ol> 
<ol id="feed-2"></li> 

現在，一切都appeneded只是「喂-1」，我不知道我怎麼能得到它的追加到另一個ID。我該如何做到這一點，所以也可以解析ID？

Answer 1

函數內部，this引用選定的元素。所以，你必須參考存儲對他們說：

var target = this; 

，然後把它傳遞給appendTo：

$(this).html(...).appendTo(target); 

例子：

$.fn.getFeed = function(feedXML) { 
    var target = this;  
    $.ajax({ 
     //... 
     success: function(xml) { 
      $(xml).find('item').each(function(){ 
       // ... 
       $('<li><a href="'+url+'">'+title+'</a></li>').appendTo(target); 
       // or target.append('<li><a href="'+url+'">'+title+'</a></li>'); 
      }); 
     } 
    }); 
    return this; 
}; 

編輯：$(this).html(...)將無法​​正常工作。它會將item元素的內容設置爲您傳遞給html()的內容。至少在Chrome中會引發錯誤。我想你只是想創建一個新的列表項目，包括鏈接和標題，並追加到列表中。

有關編寫jQuery插件的詳細信息，我建議閱讀jQuery - Plugins/Authoring（especially this）

---

附註：您也return this;在你的函數應該支持方法鏈接。

Answer 2

$.fn.getFeed = function(feedXML) { 

    var $feedElm = $(this); 

    $.ajax({ 
     type: "GET", 
     url: feedXML, 
     dataType: "xml", 
     success: function(xml) { 
      $(xml).find('item').each(function(){ 
       var title = $(this).find('title').text(); 
       var url = $(this).find('link').text(); 
       $(this).html('<li><a href="'+url+'">'+title+'</a>').appendTo($feedElm); 
      }); 
     } 
    }); 
};