解析 XML 文件以查找标题属性

发布于 2024-09-24 08:14:40 字数 1388 浏览 4 评论 0原文

我是一个天真的 jQuery 程序员，所以请有人帮我解决这个问题。第一个例子展示了我正在做的事情及其工作原理。但我的困境是该列表是通过解析 XML 创建的。如果是这样，我将如何解析 xml，找到“title”属性，然后将相应的 url 加载到 Div 中。预先感谢...

jQuery 代码

 $('.treeLinks').click(function() {
    var sourceURL = $(this).attr('title');
    $('#content').load(sourceURL);
    });

相应的 HTML 代码

<ul>
<li><a href="#" title="contentArea1.html" class="treeLinks">Link 1</a></li>
<li><a href="#" title="contentArea2.html" class="treeLinks">Link 2</a></li>
</ul>

XML 代码需要解析以获取标题属性

<?xml version="1.0" encoding="UTF-8"?>
<root>
<item id="pxml_1">
  <content><name class="treeLinks"><![CDATA[Root node 1]]></name></content>
 <item id="pxml_2">
 <content><name class="treeLinks"><![CDATA[Child node 1a]]></name>
 <item id="pxml_23">
 <content><name><![CDATA[Child node 1a]]></name></content>
 </item>
 </content>
 </item>
 <item id="pxml_3">
 <content><name><![CDATA[Child node 2b]]></name></content>
 </item>
 <item id="pxml_4">
 <content><name><![CDATA[Child node 3c]]></name></content>
 </item>
</item>
</root>

原文

I am naive jQuery programmer, so somebody please help me out with this problem. The first example shows what i am doing and its working. But my dilemma is that the list is created by parsing a XML. If so how would i parse the xml, find the 'title' attribute and then load the corresponding url into a Div. Thanks in advance...

jQuery code

 $('.treeLinks').click(function() {
    var sourceURL = $(this).attr('title');
    $('#content').load(sourceURL);
    });

Corresponding HTML Code

<ul>
<li><a href="#" title="contentArea1.html" class="treeLinks">Link 1</a></li>
<li><a href="#" title="contentArea2.html" class="treeLinks">Link 2</a></li>
</ul>

XML code which needs to be parsed for getting the title attribute

<?xml version="1.0" encoding="UTF-8"?>
<root>
<item id="pxml_1">
  <content><name class="treeLinks"><![CDATA[Root node 1]]></name></content>
 <item id="pxml_2">
 <content><name class="treeLinks"><![CDATA[Child node 1a]]></name>
 <item id="pxml_23">
 <content><name><![CDATA[Child node 1a]]></name></content>
 </item>
 </content>
 </item>
 <item id="pxml_3">
 <content><name><![CDATA[Child node 2b]]></name></content>
 </item>
 <item id="pxml_4">
 <content><name><![CDATA[Child node 3c]]></name></content>
 </item>
</item>
</root>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒几许 2024-10-01 08:14:40

像解析 html 一样解析 XML（实际上没有什么特别的）；这在 Firefox 中有效（不知道为什么 IE 不喜欢它）。另存为 .html 文件作为示例。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        //Document Ready: Everything inside this function fires after the page is loaded
        $(document).ready(function () {
            var test = '<?xml version="1.0" encoding="UTF-8"?><root><item id="pxml_1"><content><name class="treeLinks"><![CDATA[Root node 1]]></name></content> <item id="pxml_2"> <content><name class="treeLinks"><![CDATA[Child node 1a]]></name> <item id="pxml_23"> <content><name><![CDATA[Child node 1a]]></name></content> </item> </content> </item> <item id="pxml_3"> <content><name><![CDATA[Child node 2b]]></name></content> </item> <item id="pxml_4"> <content><name><![CDATA[Child node 3c]]></name></content> </item></item></root>';

            //Need to wrap you xml with a root node
            test = "<wrapper>" + test + "</wrapper>";

            $(test).find('.treeLinks').each(function(){
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
</body>
</html>

你的问题的其余部分不太清楚。我无法弄清楚你的 xml 是如何创建上面的链接的。如果可以的话，澄清 XML 和链接之间的关系。

希望这能让您开始！

Parse your XML the same way you would html (there's really nothing special about it); This works in Firefox (not sure why IE didn't like it). Save as an .html file for an example.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        //Document Ready: Everything inside this function fires after the page is loaded
        $(document).ready(function () {
            var test = '<?xml version="1.0" encoding="UTF-8"?><root><item id="pxml_1"><content><name class="treeLinks"><![CDATA[Root node 1]]></name></content> <item id="pxml_2"> <content><name class="treeLinks"><![CDATA[Child node 1a]]></name> <item id="pxml_23"> <content><name><![CDATA[Child node 1a]]></name></content> </item> </content> </item> <item id="pxml_3"> <content><name><![CDATA[Child node 2b]]></name></content> </item> <item id="pxml_4"> <content><name><![CDATA[Child node 3c]]></name></content> </item></item></root>';

            //Need to wrap you xml with a root node
            test = "<wrapper>" + test + "</wrapper>";

            $(test).find('.treeLinks').each(function(){
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
</body>
</html>

The rest of your question wasn't really clear. I couldn't figure out how your xml is creating the links above. If you can, clarify the relationship between the XML and your links.

Hope this gets your started!

回复收藏 0 原文

~没有更多了~