Come get il valore dal tag HTML nidificato con Jquery / Javascript

Sto utilizzando un bancario-prestito-calcolatore esterno sul mio sito web, che dopo aver inserito determinate quantità di denaro calcola automaticamente le condizioni per un prestito.

Ora, per motivi di visualizzazione ho bisogno di estrarre alcuni dati dai valori generati. Credo di poterlo fare con Jquery, ma non so perché.

Ecco il HTMl che il plugin calcolatore genera:

<section class="info"> <div class="graph on"> <div class="sums"> <dl data-type="capital"> <dt> <span class="percent">2%</span> </dt> <dd>100.000</dd> </dl> <dl data-type="bankloan"> <dt> <span class="percent">18%</span> </dt> <dd>400.000</dd> </dl> <dl data-type="mortage"> <dt> <span class="percent">80%</span> </dt> <dd>1.500.000</dd> </dl> </div> </div> </section> 

Quello che mi serve è i dati (che è text normale) dal <dd> -tag

Qualcuno ha un suggerimento su come realizzare questo objective?

Sì puoi farlo usando la funzionalità jquery each() che analizzerà each elemento <dl> e dopo che troverai l'elemento <dd> all'interno di ognuno di essi e otterrà il relativo text come ad esempio:

 $('.sums').find('dl').each(function(){ $('#sums_area').append('<h2>' + $(this).find('dd').text() + '</h2>'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <section class="info"> <div class="graph on"> <div class="sums"> <dl data-type="capital"> <dt> <span class="percent">2%</span> </dt> <dd>100.000</dd> </dl> <dl data-type="bankloan"> <dt> <span class="percent">18%</span> </dt> <dd>400.000</dd> </dl> <dl data-type="mortage"> <dt> <span class="percent">80%</span> </dt> <dd>1.500.000</dd> </dl> </div> </div> </section> <div id='sums_area'></div> 

La soluzione più pulita sarebbe questa utilizzando each() , find() e una function chiamata:

 var extractText = function() { console.log($(this).text()); } $('.sums').find('dd').each(extractText); 

Non c'è bisogno di seguire la strunzione html oltre ad estrarre direttamente i tag che stai seguendo. Non hai nemless bisogno della limitazione $('dd').each(extractText) $('.sums').find() , puoi fare $('dd').each(extractText) anche se questo avrebbe trovato each dd nel documento che potrebbe essere perdente.

Utilizzando una function denominata, in contrasto con una function anonima, è una buona idea. È riutilizzabile, chiamato per una migliore chiarezza del codice e più facile da testare. Vedi qui per ulteriori informazioni .