How to get value from nested HTML tag with Jquery/Javascript

Question

I'm using an external bank-loan-calculator on my website, which after entering specific amounts of money it automatically calculates the conditions for a loan.

Now, for display reasons I need to extract some data from the generated values. I think I could do that with Jquery but I'm not sure why.

Here is the HTMl the calculator plugin generates:

<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>

What I need is the data (which is plain text) from the <dd>-tag

Does anyone have a suggestion how to achieve this?

Answer 1

Yes you can do it using jquery function each() that will parse every <dl> element, and after that find the <dd> element inside each of them and get the related text, like following :

$('.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>

Hope this helps.

Answer 2

The cleanest solution would be this using each(), find() and a named function:

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

No need to follow the html struncture beyond directly extracting the tags you're after. You don't even need the $('.sums').find() restriction, you could just do $('dd').each(extractText) though this would find every dd in the document which may be leaky.

Using a named function, as oppose to an anonymous function is a very good idea. It's re-usable, named for better code clarity and easier to test. See here for more.