11548 sujets

JavaScript, DOM et API Web HTML5

Naviguer dans le xml

Bonjour à tous,

Mon premier post chez vous, que je lis depuis bien longtemps maintenant..
J'ai un peu cherché partout et je ne trouve pas de doc pour répondre à mes questions.

Je suis en train de construire une galerie photo en ajax, avec une série de 5 miniature cliquable, chacune affichant la photo en grand.

Je voudrais que les 5 miniatures changent pour toujours afficher au milieu la miniature de la photo affichée, les 2 miniatures précédentes au dessus et les 2 suivantes en dessous. (sauf pour les 2 premières et les 2 dernières évidemment).

J'arrive à utiliser les nextSibling et previousSibling pour récupérer les noms de mes fichiers précédents, mais je ne sais pas comment boucler à partir de maphoto-2 jusque maphoto+2 dans ma structure xml.

Le xml est généré par un fichier php qui fait une liste des img d'un dossier donné, il renvoie une structure 
<?xml version="1.0" ?> 
- <photos>
  <chemin>./photos/gen/</chemin> 
- <photo>
  <donnee>1.jpg</donnee> 
  <donnee>2.jpg</donnee> 
  <donnee>3.jpg</donnee> 
  <donnee>4.jpg</donnee> 
  <donnee>IMG_2053.jpg</donnee> 
  <donnee>IMG_2063.jpg</donnee> 
  <donnee>IMG_2095.jpg</donnee> 
  <donnee>IMG_2146.jpg</donnee> 
  <donnee>IMG_2148.jpg</donnee> 
  <donnee>IMG_2225.jpg</donnee> 
  </photo>
  </photos>


Mon problème donc est si on clique sur la photo 4.jpg, comment lancer une boucle à partir de la node 2.jpg jusqu'à la node img_2063.jpg ?

Merci Smiley biggrin
Bonjour,

Si j'ai bien compris, ta question revient à : "Comment fait-on pour parcourir facilement une liste d'élément dans un arbre DOM ?".

Pour celà, c'est vrai que même s'ils sont corrects, nextSibling et previousSibling ne sont pas ce qui se fait de plus pratique.
pour ton besoin, le plus simple me semble d'utiliser childNodes.

Un exemple classique d'utilisation : faire un traitement en utilisant toutes les lignes d'une liste <ul>, qui contient une liste de courses.


<ul id="ma_liste_de_course">
  <li>Du pain</li>
  <li>Du vin</li>
  <li>Du Boursin</li>
</ul>




var monNoeudUl = document.getElementById("ma_liste_de_course");
if(monNoeudUl.hasChildNodes())
{
  for(var i = 0; i < monNoeudUl.childNodes.length; i++)
  {
    if(monNoeudUl.childNodes[i].hasChildNodes() && monNoeudUl.childNodes[i].firstChild.nodeType == Node.TEXT_NODE)
    {
      alert("N'oublie pas d'acheter " + monNoeudUl.childNodes[i].firstChild.nodeValue);
    }
  }
}
[/i][/i][/i]
mon problème se situe surtout au niveau du démarage de ma boucle.

Comment faire pour démarrer à la x-ième node, et pas à la première?

je cherche un moyen un peu moins lourd que de tester la valeur de la node, remonter de 2 nodes et boucler 5 fois..
bonjour ,
a écrit :

Elriiico a écrit
if(monNoeudUl.childNodes.hasChildNodes() && monNoeudUl.childNodes.firstChild.nodeType == Node.TEXT_NODE)


attention , IE 6 ne reconnait pas les constantes des types de noeuds (Dom Core) ,
ce qui peut poser problème de compatibilité Smiley cligne
Modifié par kzone (05 Jul 2007 - 20:38)
AnagraM a écrit :
je cherche un moyen un peu moins lourd que de tester la valeur de la node, remonter de 2 nodes et boucler 5 fois..

J'ai peur que tu sois obligé de le faire. Mais tu peux imaginer quelque chose de plus générique. Par exemple :
var NB_PHOTOS_AUTOUR = 2;

var el = document.getElementById("maphoto"), currentEl = el;

for (var i = 0; i < NB_PHOTOS_AUTOUR && currentEl.previousSibling; ++i) {
  currentEl = currentEl.previousSibling;
}

for (i = 0; i < (2 * NB_PHOTOS_AUTOUR + 1) && currentEl; ++i) {
  // Faire quelque chose avec currentEl

  currentEl = currentEl.nextSibling;
}

Modifié par Julien Royer (06 Jul 2007 - 14:12)
Sujet clos
Aller à