En parcourant XML avec jQuery

J'ai une base de code qui peut faire une boucle par du XML généré à partir d'Adobe RoboHelp (pour notre documentation d'aide). Cela fonctionne bien, mais comme un sujet pourrait être imbriquées autant de fois que l'auteur veut, j'ai besoin d'un meilleur moyen pour faire une boucle par le biais de ce XML plutôt que de simplement l'imbrication .each() boucles.

Voici ce que le XML ressemble à

<?xml version="1.0" encoding="utf-8"?>
<!--RoboML: Table of Content-->
<roboml_toc>
<page title="Welcome" url="Welcome.htm"/>
<book title="Getting Started" url="Getting_Started/Initial_Setup.htm">
<page title="Initial Setup" url="Getting_Started/Initial_Setup.htm"/>
<page title="Customize Settings" url="Getting_Started/Settings.htm"/>
</book>
<book title="Administrator Services" url="Administrator_Services/General_Administrator.htm">
<book title="Portal Workspace" url="Administrator_Services/Portal_Workspace/AdminHome.htm">
<page title="Home" url="Administrator_Services/Portal_Workspace/AdminHome.htm"/>
<page title="Portal Accounts" url="Administrator_Services/Portal_Workspace/Portal_Accounts.htm"/>
</book>
<book title="SpamLab" url="Administrator_Services/SpamLab/SpamLab_Admin_General.htm">
<page title="Alerts" url="Administrator_Services/SpamLab/Alerts.htm"/>
<page title="Spam Quarantine" url="Administrator_Services/SpamLab/Admin_Spam_Quarantine_.htm"/>
</book>
</book>
<book title="User Services" url="User_Services/General_User.htm">
<book title="Portal Workspace" url="User_Services/Portal_Workspace/Home.htm">
<page title="Home" url="User_Services/Portal_Workspace/Home.htm"/>
<page title="Self Help" url="User_Services/Portal_Workspace/Self_Help.htm"/>
</book>
<book title="SpamLab" url="User_Services/SpamLab/SpamLab_General.htm">
<page title="Spam Quarantine" url="User_Services/SpamLab/Spam_Quarantine.htm"/>
<page title="Virus Quarantine" url="User_Services/SpamLab/Virus_Quarantine.htm"/>
</book>
<book title="Encryption" url="User_Services/Encryption/Encryption_General.htm">
<page title="Outlook Plug-in" url="User_Services/Encryption/Encryption_Outlook_Plug_in.htm"/>
</book>
</book>
</roboml_toc>

Un <page> est un article, et un <book> est un dossier.

Son de mon code jQuery, qui ne peut regarder à un niveau profond de balises

   //Get the TOC
$tocOutput="";
$.get(tocURL,function(toc){
$(toc).children().each(function(){
$tocOutput+="<li><a href='"+$(this).attr("url")+"'>"+$(this).attr("title")+"</a>";
if(this.tagName=="BOOK"){
$tocOutput+="<ul>";
$(this).find("page").each(function(){
$tocOutput+="<li><a href='"+$(this).attr("url")+"'>"+$(this).attr("title")+"</a></li>";
});
$tocOutput+="</ul>";
}
$tocOutput+="</li>";
});
$("#list").html($tocOutput);

Je sais qu'il y a un meilleur moyen de parcourir tous les éléments et ensuite déterminer si l'élément a des enfants, etc. mais je ne peux pas penser comment le faire.

Toute aide est grandement appréciée!

Juste curieux - pourquoi cela doit être fait sur le client? Pourquoi ne pas appliquer une transformation XSLT sur le serveur et d'envoyer le html? Est le xml dynamique? Pourrait le transformer en html pas être mis en cache sur le serveur?
Peu importe, heureux que vous ayez trouvé une solution - MAINTENANT ACCEPTER DE KEITH RÉPONSE 🙂
JE REFUSE! C'était juste une preuve de concept pour l'instant.... en fait, je voulais juste impressionner certaines personnes. Ils sont doucher moi avec éloges maintenant, alors ça vaut la peine. Finalement, je pense que nous allons le faire côté serveur si.

InformationsquelleAutor Chris Barr | 2009-10-15

Fonctions récursives de travail pour cela. Lorsque vous créez une fonction qui crée et utilise un interne récursive de fermeture, vous pouvez envelopper le tout dans un joli petit package:

    $.get(tocURL, function(toc) {
function makeToc($xml) {
//variable to accumulate markup
var markup = "";
//worker function local to makeToc
function processXml() {
markup += "<li><a href='" + $(this).attr("url") + "'>" + $(this).attr("title") + "</a>";
if (this.nodeName == "BOOK") {
markup += "<ul>";
//recurse on book children
$(this).find("page").each(processXml);
markup += "</ul>";
}
markup += "</li>";
}
//call worker function on all children
$xml.children().each(processXml);
return markup;
}
var tocOutput = makeToc($(toc));
$("#list").html(tocOutput);
});

InformationsquelleAutor keithm

1

Vous pouvez utiliser

$(el).children().length qui permettrait le retour de '0' ou un nombre positif, alors la boucle si c'est un nombre positif qui évalue à true. Vous pouvez également utiliser une boucle while pour ce faire, de manière récursive, et de re-définir la référence du gestionnaire cependant, je ne suis pas tout à fait sûr que ça va marcher parce que votre nodeNames pour chaque enfant suivant différents ( ou le font-ils? ) .. Ce qui est le plus imbriqué exemple, vous pouvez fournir?
- Non, les noms des nœuds sont soit <livre> ou <page>. Une page peut exister à l'intérieur ou à l'extérieur d'un livre. Un livre peut contenir d'autres livres ou des pages. Dans le fichier XML que j'ai posté ci-dessus il y a une page qui a 2 livre parents.
InformationsquelleAutor meder omuraliev
1

Merci beaucoup Keith, qui a été le billet - enfin presque, j'ai dû faire une modification MINEURE et puis il a parfaitement fonctionné!

Mon code est ci-dessous.
```
$tocOutput="";
$.get(tocURL,function(toc){
function makeToc($xml) {
//worker function local to makeToc
function processXml() {
console.log($(this));
$tocOutput += "<li><a href='" + $(this).attr("url") + "'>" + $(this).attr("title") + "</a>";
if (this.nodeName == "BOOK") {
$tocOutput += "<ul>";
//recurse on book children
$(this).children().each(processXml);
$tocOutput += "</ul>";
}
$tocOutput += "</li>";
}
//call worker function on all children
$xml.children().each(processXml);
}
var tocOutput = makeToc($(toc));
$("#toc").html($tocOutput);
completed($("#toc"));
});
```
Vous remarquerez tous que je suis en train de faire est de déclarer la variable en dehors de la $.get() puis-je utiliser $xml.children().each(processXml); au lieu de $(this).find("page").each(processXml);
que vous avez eu.

La raison pour cela est que les enfants pourraient être les pages OU livres, mais ce que vous aviez en le limitant aux seules pages.

Merci encore!
- Vous pouvez me remercier en acceptant ma réponse! Incidemment, mon but n'était pas de résoudre l'ensemble de votre problème, il suffit de dupliquer la logique dans votre question. Aussi, j'ai placé la déclaration de la variable à l'intérieur de makeToc() en tant que meilleure pratique générale. Faire de cette façon il est clair que cette variable est uniquement pour l'utilisation de makeToc d'accumuler des résultats.
InformationsquelleAutor Chris Barr

Ce lien constitue un bon exemple d'utilisation d'une itération à travers xml
http://anasthecoder.blogspot.in/2012/02/looping-through-xml-with-jquery.html

xml.find('result').find('permissionDetails').each(function(){
$(this).children().each(function(){
var tagName=this.tagName;
var val=$(this).text();
if(val==1){
$('input:checkbox[name='+tagName+']').attr('checked',true);
}
else if(val==0){
$('input:checkbox[name='+tagName+']').removeAttr('checked');
}
})
});

InformationsquelleAutor Ima

Ici est quelque chose à gagner un peu plus d'éloges. J'en ai fait un anonyme, un appel de fonction, et utilisé les arguments.appelé à répéter. J'ai été moi-même à la recherche de cette méthode, ceci et un autre thread à stackoverflow m'a aidé et je tiens à le payer de retour 🙂

$.get(tocURL,function(data){
var markup = "<ul>";
$(data).each(function(){
markup += "<li><a href='" + $(this).attr("url") + "'>" + $(this).attr("title") + "</a>";
if (this.nodeName == "BOOK") {
$markup += "<ul>";
$(this).children().each(arguments.callee);    
$markup += "</ul>";
}
markup += "</li>";
});
$("#list").html(markup+"</ul>");
});

InformationsquelleAutor Sanjeev Satheesh

Vous devez vous connecter pour publier un commentaire.