通过XML解析器循环？

本文介绍了通过XML解析器循环？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在开发一个应用程序，点击一个按钮后，存储在XML文件中的文档信息列表将显示在< ul> 标签。该函数中的当前JavaScript是; $ p $ 函数viewXMLFiles（）{ xmlhttp = new XMLHttpRequest（）; xmlhttp.open（GET，TestInfo.xml，false）; xmlhttp.send（）; xmlDoc = xmlhttp.responseXML; document.getElementById（docname）。innerHTML = xmlDoc.getElementsByTagName（document_name）[0] .childNodes [0] .nodeValue; document.getElementById（filetype）。innerHTML = xmlDoc.getElementsByTagName（file_type）[0] .childNodes [0] .nodeValue; document.getElementById（fileloc）。innerHTML = pathToRoot +/+ document.getElementById（docname）。innerHTML; document.getElementById（docname1）。innerHTML = xmlDoc.getElementsByTagName（document_name）[1] .childNodes [0] .nodeValue; document.getElementById（filetype1）。innerHTML = xmlDoc.getElementsByTagName（file_type）[1] .childNodes [0] .nodeValue; document.getElementById（fileloc1）。innerHTML = pathToRoot +/+ document.getElementById（docname1）。innerHTML; }

但是我想设置它以便即使添加更多文件信息，该功能也会显示它。我已经看过 jquery xml解析循环这个问题，但我无法得到函数上班。这里是XML文件;

< document_list> <文件> < document_name> Holidays.pdf< / document_name>< br /> < file_type> .pdf< / file_type> < br /> < file_location> TEST< / file_location> < br /> < / document> <文件> < document_name> iPhone.jsNotes.docx< / document_name>< br /> < file_type> .docx< / file_type>< br /> < file_location> TEST< / file_location>< br /> < / document> < / document_list>

这是我使用的HTML。有一个按钮和我正在使用的< ul> 标签;

<$ c $ < button> onclick =viewXMLFiles（）; document.getElementById（'showDocumentLink'）。style.display ='block';>查看文档信息< / button>< br> < div id =doclist> < h2>文档1;< / h2> < label>文件名称< / label>< br>< span id =docname>< / span>< br> < label>档案类型< / label>< br>< span id =filetype>< / span>< br> < label>档案位置< / label>< br>< span id =fileloc>< / span>< br> < / div> < div id =doclist> < h2>文档2;< / h2> < label>文件名称;< / label>< br>< span id =docname1>< / span>< br> < label>文件类型< / label>< br>< span id =filetype1>< / span>< br> < label>档案位置< / label>< br>< span id =fileloc1>< / span>< br> < / div>

任何人都可以帮我把这个放到循环中吗？我已经链接jQuery和jQTouch，所以我可以同时使用它们。

非常感谢您提前xx

解决方案

使用Irfan的答案作为基础，要将值添加到标签中，请添加一个计数器，然后将从XML解析循环中抓取的值插入相应的跨度。 b $ b

< script> xmlhttp = new XMLHttpRequest（）; xmlhttp.open（GET，TestInfo.xml，false）; xmlhttp.send（）; xmlDoc = xmlhttp.responseXML; $ xml = $（xmlDoc）; var documents = $ xml.find（'document_list'）; var doccount = 0; //将用于查找HTML元素 var namelabel =docname; var typelabel =filetype; var locationlabel =fileloc; documents.children（'document'）。each（function（）{ var name = $（this）.find（'document_name'）。text（）; var file_type = $（this）.find（'file_type'）。text（）; var file_location = $（this）.find（'file_location'）。text（）; //在第一个文档之后，我们需要将该数字添加到跨度ID if（doccount> 0）{ namelabel =docname+ doccount; typelabel =filetype+ doccount; locationlabel =fileloc+ doccount; } //将XML值插入标签 $（'span＃'+ namelabel）。 html（name）; $（'span＃'+ typelabel）.html（file_type）; $（'span＃'+ locationlabel）.html（file_location）; //增加计数器 doccount ++; }）; < / script>

I am developing an app, where on the click of a button, a list of the document information stored in an XML file is shown on screen in a <ul> tag. The current JavaScript in the function is;

function viewXMLFiles() { xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "TestInfo.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; document.getElementById("docname").innerHTML = xmlDoc.getElementsByTagName("document_name")[0].childNodes[0].nodeValue; document.getElementById("filetype").innerHTML = xmlDoc.getElementsByTagName("file_type")[0].childNodes[0].nodeValue; document.getElementById("fileloc").innerHTML = pathToRoot + "/" + document.getElementById("docname").innerHTML; document.getElementById("docname1").innerHTML = xmlDoc.getElementsByTagName("document_name")[1].childNodes[0].nodeValue; document.getElementById("filetype1").innerHTML = xmlDoc.getElementsByTagName("file_type")[1].childNodes[0].nodeValue; document.getElementById("fileloc1").innerHTML = pathToRoot + "/" + document.getElementById("docname1").innerHTML; }

but i want to set it so that even if more file information is added, the function will display it too. i have already looked at Jquery xml parsing loops this question, but i couldn't get the function to work. Here's the XML file;

<document_list> <document> <document_name>Holidays.pdf</document_name><br /> <file_type>.pdf</file_type> <br /> <file_location>TEST</file_location> <br /> </document> <document> <document_name>iPhone.jsNotes.docx</document_name><br /> <file_type>.docx</file_type><br /> <file_location>TEST</file_location><br /> </document> </document_list>

And this is the HTML i am using. There's a button and the <ul> tags i'm using;

<button onclick = "viewXMLFiles(); document.getElementById('showDocumentLink').style.display = 'block';">View Document Info</button><br> <div id = "doclist"> <h2>Document 1;</h2> <label>Document Name;</label><br><span id = "docname"></span><br> <label>File Type</label><br><span id = "filetype"></span><br> <label>File Location</label><br><span id = "fileloc"></span><br> </div> <div id = "doclist"> <h2>Document 2;</h2> <label>Document Name;</label><br><span id = "docname1"></span><br> <label>File Type</label><br><span id = "filetype1"></span><br> <label>File Location</label><br><span id = "fileloc1"></span><br> </div>

Can anyone help me put this into a loop? I have linked jQuery and jQTouch so i can use both of them.

Thank you so much in advance xx

解决方案

Using Irfan's answer as a base, to get the values into your labels add a counter, then just insert the values grabbed from the XML parsing loop into the corresponding span.

<script> xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "TestInfo.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; $xml = $( xmlDoc ); var documents = $xml.find('document_list'); var doccount = 0; //will be used to find the HTML elements var namelabel = "docname"; var typelabel = "filetype"; var locationlabel = "fileloc"; documents.children('document').each(function() { var name = $(this).find('document_name').text(); var file_type = $(this).find('file_type').text(); var file_location = $(this).find('file_location').text(); //after the first document we need to add the number to the span id if(doccount > 0){ namelabel = "docname" + doccount; typelabel = "filetype" + doccount; locationlabel = "fileloc" + doccount; } //insert the XML values into the label $('span#'+namelabel).html(name); $('span#'+typelabel).html(file_type); $('span#'+locationlabel).html(file_location); //increment the counter doccount++; }); </script>