将某些内容解析为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>

现在，所有内容都被附加到“feed-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插件的更多信息，我建议阅读 (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);
            });
        }
    });
};