javascript - 使用 javascript 和 Jquery 解析 Div

Question

我有一个 div 'rank'，其中包含另一个 div 'line'，它自己包含两个 div 'name' 和 'value'。我想用 Javascript 和 jQuery 使用哈希检索 3 个名字和值，但不知道我应该怎么做。我正在考虑在检查第 3 行时使用循环并销毁其他 div，但我不知道之后该怎么做，而且这个解决方案效率不高......

<div id='rank'>
<div class="line"><div class="name">1.&nbspmanone</div><div class="value">35</div></div>    
<div class="line"><div class="name">2.&nbspmantwo</div><div class="value">32</div></div>
<div class="line"><div class="name">3.&nbspmanthree</div><div class="value">30</div></div>
<div class="line"><div class="name">4.&nbspmanfour</div><div class="value">29</div>
</div><div class="line"><div class="name">5.&nbspmanfive</div><div class="value">25</div></div>
<div class="line"><div class="name">6.&nbspmansix</div><div class="value">24</div></div><div class="line"><div class="name">7.&nbspmanseven</div><div class="value">21</div></div><div class="line"><div class="name">8.&nbspmannine</div></div>
</div>

Answer 1

您需要使用 jQuery 查找前三行，然后构建名称和值 div 文本的 javascript 对象（哈希）：

$('#getTopThree').on('click', function(e) {
    var result = {}; //name and value will be placed in this object

    $('#rank .line:lt(3)').each(function() { //for each of the first three line divs
        var that = $(this);
        result[that.find('.name').text()] = that.find('.value').text(); //add name and value to result object
    });

    $('#result').text(JSON.stringify(result)); //print result for debugging
});

工作演示