Comment enregistrer la structure HTML ul-li en object javascript

J’ai cette structure html suivante usilg ul et li.

  
 top1   mod1   bottom1 
 
 
 
 
  top2   mid2   bottom2

le site Web permet à l’utilisateur d’append plus de données sous cette structure et utilise jquery treeview pour afficher la structure arborescente de manière dynamic. Maintenant, j’ai besoin de sauvegarder toute cette structure ul-li dans un object js pour une utilisation future dans le site Web. Comment puis-je y arriver? le dernier nœud (“bottom1 et bottom2 here”) a une classe “last” si cela aide. comme nous pouvons append des données de manière dynamic, nous pouvons être sûrs du nombre de niveaux d’ul li à la fin lorsque l’utilisateur clique sur “enregistrer”

Vous pouvez utiliser la fonction récursive pour enregistrer un object d’arborescence.

 function save(obj_ul, tree){ var obj_lis = obj_ul.find("li") if (obj_lis.length == 0) return; obj_lis.each(function(){ var $this = $(this); if($this.parent("ul").get(0) == obj_ul.get(0)) { tree.push({ name : $this.find('> span').text(), child : save($this.find("ul").first(), []) }); } }); return tree; } console.log(save($('#productTree'), []));

Si vous voulez répéter la même chose, mot pour mot, en tant que chaîne de code HTML ailleurs sur le site, vous pouvez simplement le faire? Puis .append() ou .prepend() treeview vous à votre .prepend() .

Var treeview = $ (‘# productTree’). Parent (). Html ()

En supposant que vous vouliez JSON:

 function save(){ var tmp = []; $('#productTree li.collapsable').each(function(){ var $this = $(this), $spans = $this.find('span'), o = []; $spans.each(function(){ o.push($(this).text()) }) tmp.push(o); }); return tmp; }

Vous pouvez également utiliser map() pour accomplir la même chose.

EDIT: mis à jour, en supposant que votre texte vivra dans un span . Cela créera un tableau de tableaux, chacun contenant le texte de la span dans chacun de vos éléments de liste.