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();

......第二个是

$('.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(index, element) {
    //your individual item code goes here
    console.log( index + ": " + $( this ).text() );
});

Answer 4

如果您事先不知道有多少人可以使用.each

循环播放它们

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

Answer 5

我通常会获取所有dom元素，然后循环遍历它们以完成必要的功能。这是一个工作小提琴。 https://jsfiddle.net/bbmtk7tm/

var data = $('.group-capitalization-content .item .number');
for(var i=0; i<data.length;i++)
{
console.log(data[i].innerHTML);
}

Answer 6

$('.group-capitalization-content>.item>.number').each(function(index, value){
  console.log('Number at '+index+': '+$(value).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

6 个答案: