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?

Zakaria Acharki · Accepted Answer · 2015-09-16 21:59:28Z

3

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.

edited Sep 16, 2015 at 21:59

answered Sep 16, 2015 at 20:45

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ST80 Over a year ago

This is great! Thanks! :-)

ST80 Over a year ago

If I need to extend it, how can I get each of the values in its own <h2>-tag?

ST80 Over a year ago

Very nice! This is exactly what I want! Thank you alot! :-)

Toni Leigh · Accepted Answer · 2015-09-16 20:55:52Z

1

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.

answered Sep 16, 2015 at 20:55

Toni Leigh

4,9893 gold badges24 silver badges40 bronze badges

1 Comment

Toni Leigh Over a year ago

@Steve thanks, the best thing you take from this as you learn JS is the bit about anonymous functions :-)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related