解析一些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); 
      }); 
     } 
    }); 
};