[英]How to get value from nested HTML tag with Jquery/Javascript
我在我的網站上使用外部銀行貸款計算器,在輸入特定金額后,它將自動計算貸款條件。
現在,出於顯示原因,我需要從生成的值中提取一些數據。 我想我可以用Jquery做到這一點,但我不確定為什么。
這是計算器插件生成的HTMl:
<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>
我需要的是<dd>
-tag的數據(純文本)
有人建議如何實現這一目標嗎?
是的,您可以使用jquery函數each()
解析每個<dl>
元素,然后在每個元素內找到<dd>
元素並獲取相關文本,如下所示:
$('.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>
希望這可以幫助。
最干凈的解決方案是使用each()
, find()
和一個命名函數:
var extractText = function() {
console.log($(this).text());
}
$('.sums').find('dd').each(extractText);
除了直接提取所需標簽之外,無需遵循html結構。 您甚至都不需要$('.sums').find()
限制,您可以只執行$('dd').each(extractText)
盡管這會發現文檔中可能泄漏的每個dd
。
與匿名函數相反,使用命名函數是一個很好的主意。 它是可重復使用的,其名稱旨在使代碼更清晰,更易於測試。 看到這里更多 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.