拉特定的XML节点（S）为HTML文档节点、文档、XML、HTML
第一次的海报。请温柔。
first time poster. Please be gentle.
这题目可能类似于其他几个问题在那里，但据我可以看到这是一个独特的问题，我试图解决的问题。 FWIW，我主要是设计师;我很危险的Flash和HTML和CSS，但与其他所有的杂草了一下。从搜索的时候，我似乎要朝一个AJAX / jQuery的解决方案，我需要一些帮助。
This topic may be similar to several other questions out there, but as far as I can see this is a unique problem I'm trying to solve. FWIW, I'm primarily a designer; I'm dangerous with Flash and HTML and CSS, but a bit in the weeds with everything else. From searching around, I appear to be heading for a ajax/jquery solution, which I need some help with.
首先，我建立了一个相当复杂的Flash界面，拉内容从一个良好且有效的XML文件。这部分已经完成，精美的作品。
To begin, I have built a fairly complex Flash interface which pulls content from a well-formed and validated XML file. This part is done, works beautifully.
不过，客户想创建一个简单的（R）javsScript版本的界面是在地方谁没有安装Flash的观众。而且，他们希望这个版本的拉从同一个XML文件中的值（文本），所以他们只需要编辑一个文件进行更改。
However, the client wants to create a simple(r) javsScript version of the interface to be in place for viewers who don't have Flash. AND, they would like this version to pull values (text) from the SAME XML file, so they only need to edit the one file to make changes.
似乎是一个合理的要求，但在执行它并不显得那么简单。最大的障碍是，我不想循环XML输出 - 我想打电话给特定节点的值转换为特定的元素
Seems like a reasonable request, but executing it doesn't appear to be quite so simple. The biggest hurdle is that I do not want to loop the XML for output - I want to call specific node values into specific elements.
下面是一个简单地例子，因为我可以鼓起。从XML像这样：
Here's as simple an example as I can muster. From XML like so:
<section>
<page>
<name image="image1.jpg">Section One</name>
<copy>This is a description of section one.</copy>
</page>
<page>
<name image="image2.jpg">Section Two</name>
<copy>This is a description of section two.</copy>
</page>
</section>
我要创建的HTML像这样：
I want to create HTML like so:
<div id="greenBackground">
<h1>[value from 1st XML <name> node]</h1>
<p>[value from 1st XML <copy> node]</p>
<img src="[value from 1st XML <name> node image attribute]" />
</div>
<div id="blueBackground">
<h1>[Value of 2nd XML <name> node]</h1>
<p>[Value of 2nd XML <copy> node]</p>
<img src="[value from 2nd XML <name> node image attribute]" />
</div>
他们关键是每个div具有不同的ID，以便为每个页面有唯一的背景颜色和格式。我们的想法是那么我会用一个简单的重叠的div脚本来显示/隐藏这些节的相同的空间内。
They key is that each div has a different id, in order for each 'page' to have unique background colors and formatting. The idea is then that I would use a simple overlapping div script to show/hide each of these 'sections' within the same footprint.
希望这是有道理的，请不要犹豫澄清。任何和所有帮助AP preciated。
Hopefully this makes sense, please don't hesitate for clarification. Any and all help is appreciated.
推荐答案
听起来像是你正在尝试做一个转变，从XML转换为HTML。为此，您可以使用一种称为XSLT，但众所周知的技术被很多人视为一个 XSLT转换。您可以使用XSLT结合的XPath （XML查询语言）做正是你在你的问题描述。
Sounds like you are trying to do a transformation from XML to HTML. For this you can use a technology called XSLT but commonly known by many as an xslt transformation. You can use xslt in conjunction with xpath (query language for xml) to do exactly what you describe in your question.
下面是XML（增加了DIV ID的到XML）
Here is the xml: (added the div id's to the xml)
<?xml version="1.0" encoding="utf-8"?>
<section>
<page>
<div id="greenBackground"></div>
<name image="image1.jpg">Section One</name>
<copy>This is a description of section one.</copy>
</page>
<page>
<div id="blueBackground"></div>
<name image="image2.jpg">Section Two</name>
<copy>This is a description of section two.</copy>
</page>
</section>
下面是XSLT：
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<xsl:for-each select="section/page">
<div>
<xsl:attribute name="id">
<xsl:value-of select="div//@id"/>
</xsl:attribute>
<h1>
<xsl:value-of select="name"/>
</h1>
<p>
<xsl:value-of select="copy"/>
</p>
<img>
<xsl:attribute name="src">
<xsl:value-of select="name//@image"/>
</xsl:attribute>
</img>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
下面是输出运行变换分析后：
Here is the output after you run the tranform:
<html>
<body>
<div id="greenBackground">
<h1>Section One</h1>
<p>This is a description of section one.</p><img src="image1.jpg"></div>
<div id="blueBackground">
<h1>Section Two</h1>
<p>This is a description of section two.</p><img src="image2.jpg"></div>
</body>
</html>
享受！
