使用 jQuery 读取 RSS 提要 - 无法读取 <link> 元素答案

【问题标题】：Reading an RSS Feed with jQuery - Unable to read <link> element使用 jQuery 读取 RSS 提要 - 无法读取 <link> 元素
【发布时间】：2026-02-12 04:25:01
【问题描述】：

我正在使用 jquery 构建我的网站的 RSS 提要，并且链接元素一直返回空白。我自己构建的 javascript 解决方案没有问题，但 jquery 似乎讨厌链接元素。

下面是jquery代码：

function loadData(xml, ifid) {
        var htmlStr;
        var iframeToWrite = document.getElementById(ifid);

        htmlStr = "<html><body>"
        var items = $(xml).find("channel item").each(function () {
            var $article = $(this);
            var title = $article.find("title").text();
            var description = $article.find("description").text();
            var link = $article.find("link").text();
            var pubDate = $article.find("pubDate").text();

            htmlStr += "<div class='Rssitem'>\n";
            htmlStr += "\t<h3><a href='" + link + "' target='_blank' >" +
               title + "</a></h3>\n";
            htmlStr += "\t<p>" + description + "</p>\n";
            htmlStr += "\t<h6>" + pubDate + "</h6>\n";
            htmlStr += "</div>\n"
        });

        htmlStr += "</body></hmtl>";
        iframeToWrite.contentDocument.write(htmlStr);

    }

下面是我从获得的 npr 流中编辑的示例 xml：

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:npr="http://www.npr.org/rss/" xmlns:nprml="http://api.npr.org/nprml" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
  <channel>
    <title>News</title>
    <link>http://www.npr.org/templates/story/story.php?storyId=1001&amp;ft=1&amp;f=1001</link>
    <description>NPR news, audio, and podcasts. Coverage of breaking stories, national and world news, politics, business, science, technology, and extended coverage of major national and world events.</description>
    <language>en</language>
    <copyright>Copyright 2012 NPR - For Personal Use Only</copyright>
    <generator>NPR API RSS Generator 0.94</generator>
    <lastBuildDate>Tue, 28 Aug 2012 12:19:00 -0400</lastBuildDate>
    <image>
      <url>http://media.npr.org/images/npr_news_123x20.gif</url>
      <title>News</title>
      <link>http://www.npr.org/templates/story/story.php?storyId=1001&amp;ft=1&amp;f=1001</link>
    </image>
    <item>
      <title>Reports: Obama Administration Will Unveil New Fuel-Efficiency Standards</title>
      <description>The new rules will require U.S. cars to average 54.5 miles per gallon by 2025.</description>
      <pubDate>Tue, 28 Aug 2012 12:19:00 -0400</pubDate>
      <link>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&amp;f=1001</link>
      <guid>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&amp;f=1001</guid>
      <content:encoded><![CDATA[<p>The new rules will require U.S. cars to average 54.5 miles per gallon by 2025.</p><p><a href="http://www.npr.org/templates/email/emailAFriend.php?storyId=160172356">&raquo; E-Mail This</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://del.icio.us/post?url=http%3A%2F%2Fwww.npr.org%2Ftemplates%2Fstory%2Fstory.php%3FstoryId%3D160172356">&raquo; Add to Del.icio.us</a></p>]]></content:encoded>
    </item>
  </channel>
</rss>

【问题讨论】：

您是否只有“链接”或“标题”或“项目”的其他子项有问题？

标签： jquery xml-parsing rss-reader

【解决方案1】：

您必须先将您的 xml 字符串解析为 xml 文档jQuery.parseXML()。
引用文档：

jQuery.parseXML 使用浏览器的原生解析功能创建一个有效的 XML 文档。然后可以将此文档传递给 jQuery创建一个典型的可以遍历的jQuery对象被操纵。

如果你不使用 parseXML 并在其周围包裹一个 jQuery 选择器，jQuery 可能无法正确地交互所有节点。

在您的示例中，<link> 标记未正确插入，</link> 结束标记已在未解析的情况下被删除，因此您无法正确查询链接文本。
您可以确认是否执行console.log($(this)) 并检查控制台输出中的内容。您可以看到 <link> 然后是文本，但结尾的 </link> 不见了。

但是，当首先将您的 xml 解析为文档对象时，您现在可以在其周围包裹一个 jQuery 选择器并可靠地访问所有节点。当然，假设初始 XML 字符串是有效的 XML。

DEMO - 在您的 xml 字符串上使用 parseXml 并在之后查询它

将其应用于您的代码将类似于：

htmlStr = "<html><body>";

// Parse the XML to a document object and then wrap it into a jQuery selector
var $xml = $($.parseXML(xml));

var items = $xml.find("channel item").each(function() {
    var $article = $(this);
     //..... rest of your code as is

【讨论】：