[Web2.0] Jquery, primi passi

Giovanni Battista Lenoci gianiaz a gianiaz.net
Mar 22 Maggio 2007 15:55:18 CEST


Cristiano Verondini ha scritto:
>    La funzione $() prende un descrittore ed un eventuale elemento di 
> partenza, e ricerca all'interno del DOM tutti gli elementi che 
> corrispondono a quel selettore. Dopodiché puoi farci diverse cose, ma 
> la sostanza è che il risultato *non* è un singolo elemento, anche se 
> il selettore di fatto ne seleziona uno solo (ad esempio usando il suo 
> id).
>
>    Quindi se fai:
>
>        $('#xyx').onclick = ...
>
>    Non modifichi il gestore onclick dell'elemento DOM il cui id è xyz. 
> Per farlo devi ottenere il primo (ed unico) elemento del risultato, in 
> questo modo:
>
>        $('#xyx').get(0).onclick = ...
>
>    Se invece è possibile che il selettore restituisca più elementi (e 
> chiaramente funziona anche con solo un elemento) puoi usare:
>
>        $('#xyx').get(0).each(function() {
>
>                // accedo al singolo oggetto con 'this'
>
>            this.onclick = ...
>        });
>
Non bacchettatemi, la doc la sto leggendo, ma non trovo soluzione al mio 
problema.

In pratica il mio codice è il seguente:

<ul id="main_tree" class="myTree">
  <li class="treeItem" id="li_0">
    <img src="images/treefolder.png" class="folderImage" />
      <span id="tree_span_0" class="textHolder">ROOT</span>
      <ul>
        <li class="treeItem" id="li_10">
          <img src="images/treefolder.png" class="folderImage" />
          <span id="tree_span_10"class="textHolder">Categoria 1</span>
          <ul>
            <li class="treeItem" id="li_13">
              <img src="images/treefolder.png" class="folderImage" />
              <span id="tree_span_13"class="textHolder">Test</span>
            </li>
            <li class="treeItem" id="li_14">
              <img src="images/treefolder.png" class="folderImage" />
              <span id="tree_span_14"class="textHolder">test2</span>
            </li>
          </ul>
        </li>
        <li class="treeItem" id="li_19">
          <img src="images/treefolder.png" class="folderImage" />
          <span id="tree_span_19"class="textHolder">Categoria 2</span>
        </li>
      </ul>
  </li>
</ul>


Potete vederlo qui in funzione: http://www.gianiaz.net/test/albero.html

In pratica una volta organizzato l'albero a mio piacimento vorrei salvare le nuove posizioni. 

Sul db le categorie sono salvate seguendo questo schema:

+----+------------+----------+
| id | Nome       | genitore | 
+----+------------+----------+
| 1  | Hardware   |    0     | 
+----+------------+----------+
| 2  | Software   |    0     | 
+----+------------+----------+
| 3  | Dischi     |    1     |
+----+------------+----------+
| 4  | Sata       |    3     |
+----+------------+----------+
| 5  | Ide        |    4     |
+----+------------+----------+


Quello che vorrei fare quando premo il bottone salva è ciclare gli 
elementi "LI" livello per livello, utilizzando l'id e un po' di replace 
per salvare una coppia id_categoria;id_genitore.
Al bottone salva è associata questa funzione :

function savetree(id) {

    tree = $('#'+id);
    $('li', tree.get(0)).each(function(){
     alert(this.id);
    });   

}

E mi aspettavo che i LI estratti fossero solo quelli del primo elemento 
UL in modo da usare la funzione recursivamente, invece la funzione 
attraversa tutti gli elementi estraendo tutti i LI in modo "piatto".

Secondo voi devo continuare su questa strada oppure esiste un modo più 
snello di gestire la cosa?

Grazie

-- 
gianiaz.net
di Giovanni Battista Lenoci 
P.le Bertacchi 66 
23100 Sondrio
cell. +39.392.7096936
cell. +39.347.7196482



Maggiori informazioni sulla lista Web2.0