Come in jQuery selezionare un elemento del DOM

In jQuery quasi tutto ruota attorno ad un potente motore di selezione degli elementi, che fa uso della stessa sintassi dei CSS.

Posiamo dire che saper selezionare un elemento nel jQuery è una cosa essenziale nel usare questa libreria in pieno, quindi in questo articolo proseguiremo ad imparare varie metodi per selezione  degli elementi. Oggi vediamo come usare i metodi di attraversamento del DOM (in inglese traversing) per scegliere un elemento affinando la selezione di jQuery. Specificare diciamo al meglio l'elemento che vogliamo selezionare in una selezione che potrebbe eseere tropo estesa.

Esempio $("#inizio").parent("ul") questo metodo di selezione restituisce elementi parenti diretti del tag ul al interno della scatola con id="inizio" come vediamo qui sotto. Cosi posiamo meglio specificare cosa vogliamo selezionare nel albero del DOM  attraversandolo (come hai capito penso e per quello che il metodo si chiama atrtraversamento del DOM).

1. Selezionare elementi attraversando l'albero del DOM in jQuery

.parent ()

Seleziona gli elementi che sono parenti diretti piu vicini al selettore indicato.

Un piccolo approfondimento di jQuery.

Esso (selettore) viene chiamato anche come argomento nel linguaggio jQuery (selettore indicato fra le tonde). Quello che sara scelto e restituito per la successiva elaborazione mediante varie funzioni si chiama un oggetto, che puo contenere un solo elemento o una collezione di elementi cosi detto array

Esempio

Abbiamo un elenco non numerato

        <ul id="menu" ><li>Voce di menu 1 </li>
                <li>Voce di menu 2
                          <ul>
                                <li id="inizio"><strong>Elemento con id inizio ( #inizio)</strong></li>
                                <li>Voce di sottomenu 2 </li>
                          </ul>
          </li>
                        <li>Voce di menu 3
                          <ul>
                                <li>Voce di sottomenu 3 </li>
                          </ul>
                        </li>
                        <li>Voce di menu 4</li>
        </ul>

e vogliamo modificare colore di testo del elemento li parente del tag ul con id="inizio" 
$("#inizio").parent("ul")

E codice completo in questo caso per selezionare e modificare colore del testo di elementi <li> sara cosi

$("#inizio").parent("ul").css("color","red");

Esempi di prova, cliccare la funzione di jQuery
per vedere le selezioni fatte e modifiche riportate

term 1
definition 1-a
// da qui colorati come lo sfondo di rosso selezioanti atraverso prevUntil()
definition 1-b
definition 1-c
definition 1-d
// fino a qui
term 2
definition 2-a
definition 2-b
definition 2-c

.parents ()

Uguale al precedente solo che qui vengono selezionati non solo I parenti piu vicini e diretti ma anche parenti lontani. Per quello che qui I parenti sono indicati come multipli parents

$("#inizio").parents("ul").css("color","red");

.children ()

Seleziona gli elementi figli come si puo capire dal nome del selettore situati al primo livello di annidamento rispetto il selettore CSS passato come argomento
$("#menu").children("li").css("color","red");//scegliere tutti i tag li del primo livello

.closest()

Somiglia tanto a .parent() con la differenza che risalendo il DOM  seleziona il primo elemento che trova  e che è corisponde al argomento passato e puo includere se stesso. Dando in questo caso la possibilita di scegliere proprio  se stesso
$("#inizio").closest("li").css("color","red")// sara scelto il primo l'elemento racchiuso nel tag li della collezione restituita seguendo l'argomento passato nel nostro caso elemento con id="inizio".

.prev()

Seglie l'elemento che si trova prima del argomento passato
$("#inizio").prev ("li").css("color","red") // in questo caso sara scelto e sara cambiato il colore del elemento li che precede il nostro indicato  

    <ul>
                      <li>Voce di sottomenu 01 </li>
           <li>Voce di sottomenu 02 </li>// sara restituito questo alla nostra funzione per cambiare colore  
           <li id="inizio"><strong>Elemento di Partenza #inizio</strong></li>
           <li>Voce di sottomenu 2 </li>
            </ul>

.prevAll()

Simile a quello che abbiamo detto appena sopra solo che qui saranno scelti non solo il primo che precede ma tutti gli elementi racchiusi nel tag li che precedono il nostro indicato fra le tonde  sempre tenendo conto della collezione del selettore del CSS passato come argomento

                          <ul>             
                                <li>Voce di sottomenu 01 </li>    //e anche questo 
                                <li>Voce di sottomenu 02 </li>// questo 
                                <li id="inizio"><strong>Elemento di Partenza #inizio</strong></li>
                                <li>Voce di sottomenu 2 </li>
                          </ul>

.prevUntil()

 il metodo di selezione esegue la ricerca attraverso i predecessori di elemento indicato fra le tonde nella struttura DOM, arrestandosi quando raggiunge un elemento corrispondente all'argomento del metodo. Il nuovo oggetto jQuery restituito contiene tutti i fratelli precedenti fino a non includere quello corrispondente al selettore .prevUntil (); Gli elementi vengono restituiti in ordine dal fratello più vicino al più lontano.

Esempio

 
$( "#term-2" ).prevUntil( "dt" ).css( "background-color", "red" );
 

.next()

il metodo consente di selezionare il fratello immediatamente successivo di elemento indicato fra le tonde che si chiama, argomento del metodo, nell'albero DOM

 

.nextAll()

il metodo consente di selezionare i successori del elemento indicato fra le tonde nell'albero DOM

.nextUntil()

il metodo esegue la ricerca attraverso i successori  di elemento indicato fra le tonde nella struttura DOM, arrestandosi quando raggiunge un elemento corrispondente all'argomento del metodo. Il nuovo oggetto jQuery restituito contiene tutti i seguenti fratelli fino al elemento sucessivo corrispondente all'argomento (indicato fra le tonde).

.siblings()

il metodo  consente di trovare i fratelli reciproci  nell'albero DOM che si trovano sullo stesso livello e di costruire un nuovo oggetto jQuery dagli elementi selezionati. L'elemento originale non è compreso tra i fratelli, che è importante ricordare quando desideriamo trovare tutti gli elementi ad un determinato livello dell'albero DOM.
 $("#inizio").siblings("li").css("background-color","yellow");

.is()

A differenza di altri metodi di filtraggio, .is () non crea un nuovo oggetto jQuery. Invece, consente di testare il contenuto di un oggetto jQuery senza modificarlo. Questo è spesso utile nei callback, ad esempio nei gestori di eventi. Restituisce true, se al selettore indicato corrisponde almeno un elemento, altrimenti restituisce false .
In pratica risalendo l'albero DOM ritorna la risposta alla domanda “Ma  qui essiste quello che è indicato come argomento?” se si allora true se non false(e gia dopo posiamo applicare qualche cambiamento al elemento se è presente a seconda di risposta per esempio: colorare in un certo colore alla risposta true)    

.find()

ll metodo  ci permette di cercare i discendenti di elemento indicato fra le tonde nell'albero DOM e di costruire un nuovo oggetto jQuery dagli elementi di corrispondenza.

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

Trovare tutti gli elementi "li" nel oggetto (gruppo segnato dalla classe) li.item-ii e colorare lo sfondo di essi in rosso
Quindi nel nostro caso avrano lo sfondo rosso elementi li che contengono A B 1 2 3 e C

.get()

Il metodo consente di selezionare elemento in ordine di successione indicato fra le tonde in forma di una cifra ed applicare in seguito a questo elemento selezionato qualche funzione, va ricordato che il conteggio in jQuery e javascript comincia da 0, quindi per scegliere il primo elemento si inserisse 0, il metodo accetta anche valori negativi in questo caso la ricerca e selezione parte dal sotto del gruppo indicato

Vediamo una semplice lista non ordinata:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

nel caso
$( "li" ).get( 0 ) sara selezionato <li id="foo">foo</li>
e nel caso $( "li" ).get( -1 ) sara selezionato <li id="bar">bar</li> perché il conteggio parte da sotto.

 

.toArray()

Prima di tutto va precisato che fra le tonde non si inserisse niente, nessun argomento. Il metodo seleziona il massivo(gruppo di elementi) indicato come argomento per successiva applicazione di qualche funzione ad essi

$( "li" ).toArray()

Questa stringa dice prendendo come base la lista non numerata dal esempio precedente di selezionare e restituire per sucessiva modifica  <li id="foo">foo</li> e   <li id="bar">bar</li>

 .index()

il metodo di selezione ritorna l’indice di un elemento rispetto a quelli selezionati in una collezione . Questo metodo accetta come argomento il riferimento ad un elemento del DOM: se elemento indicato non viene trovato allora ritorna valore -1, e se non viene indicato nessun argomento fra le tonde vera preso in considerazione solo il primo elemento della collezione  e ritornerà 0

Esempio. Nel esempio vediamo il funzionamento del metodo .index() che ritornando ci mostrerà l'indice del div.

Nota: il conteggio in javasript parte da 0 e non dal 1  

Cliccare div!

Primo div
Secondo div
Terzo div

.add()

il metodo crea un nuovo oggetto jQuery contenente una copia degli elementi della collezione principale alla quale si aggiunge quello che si sceglie da add().

Per capire meglio

<p>Hello</p>
<span>Hello Again</span>
<script>
$( "p" ).add( "span" ).css( "color", "yellow" );
</script>

Come risultato ci ritornerà una collezione che conterrà la frase inserita nel tag <p> e in piu a questa frase si aggiunge quello che vine selezionato dal metodo .add() e si trova nel tag <span> .add( "span" ) E gia dopo posiamo applicare qualche funzione a questa collezione per esempio cambiare il colore di testo di questa collezione.
Come l'argomento di .add () (cio è quello che posiamo inserire fra le tonde)può essere praticamente tutto ciò che jQuery accetta, incluso selettori jQuery, riferimenti agli elementi DOM o uno snippet HTML.

.add(selector)

.add(elements)

.add(html)

.add(jQuery object)

.add(selector, context)

.each()

il metodo permette di applicare una funzione specifica per ogni elemento della collezione. Qui la parola chiave è “ogni elemento”. Quindi il nostro metodo passa da un elemento della collezione ad altro ripassando tuti e applica a loro  funzione specificata. 

$('#menu a').each(function() {
  // ... faccio qualcosa con ogni elemento della collezione scelta e restituita dal metodo di selezione $('#menu a') ...  
});

Come l'argomento di .each() posiamo inserire una funzione.

 
Letto 510 volte