Come ottenere tutte le ancore relativi a div id in jQuery

December 2

Come ottenere tutte le ancore relativi a div id in jQuery


Gli sviluppatori del sito hanno bisogno di ottenere un insieme di elementi contenuti all'interno di un altro elemento in una pagina Web. Si consideri un elemento DIV che contiene una descrizione del prodotto. Che DIV può contenere anche più tag di ancoraggio, o link, quel punto ad altre pagine che trattano il prodotto. Utilizzando la libreria jQuery JavaScript, è possibile afferrare tutti i tasselli all'interno che DIV e manipolarle. Tutto ciò che serve per usare questa libreria di programmazione è un collegamento al file che contiene il codice jQuery e l'ID del DIV che contiene i tasselli.

istruzione

1 Avviare un editor HTML o Blocco note e aprire qualsiasi documento HTML.

2 Aggiungere questa linea (senza le virgolette) alla sezione head del documento: "<script> Visita Casa Bianca </a>

<a href="http://www.nasa.gov"> Visita NASA </a>

</ Div>

<Input type = valore "pulsante" = "Test" onclick = "test di ritorno ( 'div1')" />

Questo DIV contiene due tag di ancoraggio. Il pulsante, se cliccato, richiama una funzione JavaScript denominato "test" e passaggi che funzione ID della DIV.

3 Inserire il codice JavaScript riportato di seguito nella sezione dello script del documento:

test di funzionamento (divID) {

var ancore = getAnchors (divId);

for (var i = 0; i <anchors.length; i ++) {

alert ( "Anchor Text =" + ancore [i] .innerText);

}

}

getAnchors funzione (divId) {

var ancore = $ ( "#" + divID + "> a");

tornare ancore;

}

La funzione di "test" chiama una funzione denominata "getAnchors" e passa quella funzione attraverso id del DIV. La funzione "getAnchors" recupera tutte le ancore da DIV e li restituisce alla funzione "test". La funzione di "test" memorizza le ancore nella variabile "ancore". Si noti che la funzione "getAnchors" ha una dichiarazione JQuery. Questa istruzione aggiunge il "#" all'inizio della id del DIV. In questo esempio, che diventa "# div1", perché id del DIV è "div1". Il "> una" porzione della dichiarazione rappresenta gli elementi "figlio" all'interno dell'elemento genitore DIV. Dal momento che si desideri solo i bambini di ancoraggio all'interno del DIV, il codice utilizza la lettera "A" per dire a jQuery per individuare tutti gli elementi figlio all'interno del DIV che sono elementi di ancoraggio.

4 Salvare il documento e visualizzarlo nel browser. I due collegamenti e il pulsante compaiono. Fare clic sul pulsante. L'evento click del pulsante chiama la funzione "test". Tale funzione chiama la funzione "getAnchors". La funzione "getAnchors" ottiene tutte le ancore nel DIV e li restituisce alla funzione di "test". Tale funzione visualizza quindi i valori di testo per ciascuna delle ancore.

Consigli e avvertenze

  • È possibile fare diverse cose utili con ancore dopo di loro recupero da un DIV. Scorrere la vostra collezione di ancoraggio mediante regolari JavaScript o anche "ogni" funzione di JQuery di. Per esempio, mentre scorrendo le ancore, si potrebbe cambiare il loro aspetto o semplicemente esaminare i loro valori di testo, come mostrato in questi passaggi. il sito web di JQuery ha informazioni utili sulla "ogni" funzione che aiuta gli sviluppatori a manipolare collezioni di elementi della pagina Web.