如何选择具有相同类名的特定<span>？

Question

我正在尝试从这块HTML中提取一些数据。

<div class="group-capitalization-content field-group-html-element">
    <h2><span>Capitalization</span></h2>
    <div  class="item">
        <div class="label-inline">Issued &amp; Outstanding:&nbsp;</div>
        <span class="number">242906121</span>
    </div >
    <div class="item">
        <div class="label-inline">Reserved for Issuance:&nbsp;</div>
        <span  class="number">51423534</span >
    </div>
</div>

我使用一个名为cheerio的npm模块从HTML中抓取数据。因此，我使用以下代码来尝试获取"numbers"。

 var data = $('.group-capitalization-content .item .number').text();

运行这段代码会产生：24290612151423534，这是两个结果相加在一起。

如何在此处选择单个号码/分隔它们？

Answer 1

如果上面的示例是您需要的全部，请使用.eq()。

第一个项目的text()是

$('.group-capitalization-content .item .number').eq(0).text();

...and第二个是

$('.group-capitalization-content .item .number').eq(1).text();

如果您有更复杂的情况，并且需要将数据存储在数组中，稍后，我将使用$.map() (@Sushanth's answer) -可能更具体一点，以排除页面中存在其他.number的可能性：

let data = $.map(
  $('.group-capitalization-content .item .number'), 
  function(e){ return $(e).text() }
);

Answer 2

您可以使用map方法并以.number类为目标，该类将把内容输出到一个数组中。

let data = $.map($('.number'), function(elem) {
    return $(elem).text();
});

console.log(data);

Answer 3

如果你事先不知道会有多少，你可以用.each遍历它们

$('.group-capitalization-content .item .number').each(function() {
    $(this).text(); // Save this to a var or do something with it
});