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插件的更多信息，建议您阅读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);
            });
        }
    });
};

解析jQuery函数

2 个答案: