jQuery从三个相同的表中选择第一个表中的所有行

我使用cheerio库来抓取数据，该库允许我在我的node.JS应用程序中使用jQuery选择器。我从中抓取数据的网站包含三个表格，所有这些表格都具有相同的类名称并且完全相同。这些表格内的表格行数（tr）可能会有所不同。jQuery从三个相同的表中选择第一个表中的所有行

下方是一个表的一个HTML框架：

<table class="component"> 
    <tr class="body-row"> 
     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
      </span> 
     </td>  

     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
      </span> 
     </td> 
    </tr> 
    <tr class="body-row"> 
     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
      </span> 
     </td>  

     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
      </span> 
     </td> 
    </tr> 
</table>

我希望做的是选择所有从第一台仅，并最终输出这些文本的行为JSON。当所有这些表基本相同（相同的类名）时，我将如何实现这一点？

下面是我到目前为止所尝试的，但它仍然输出所有三个表格中的文本，而不是仅输出第一个。

var that = $(this); 
that.first('table.component').find("tr.body-row").each(function(){ 
    console.log(that.find('span.data').text()); 
});

在此先感谢！作者：.first() jQuery函数

来源

2017-01-12 B_CooperA

是什么'that'到底是什么？ – Alex

哦，对不起。这是一个引用'$（this）'的变量。我已经在我的代码中声明了它，但是忘记了将它包含在这里.. –

利用获得的第一个表，然后使用$(this)的.each函数内的that

$(function(){ 
 
    $(".component").first().find('.body-row').each(function(){ 
 
    console.log($(this).find('span.data').text()); 
 
}); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table>

来源

2017-01-12 08:30:25

谢谢，期望的输出正如我所希望的那样。队友的欢呼声！ :) –

尝试这样的。

选择第一个表

$('table.component').first()

$('table.component').first().find("tr.body-row td span span.data").each(function(index,elem){ 
 
    console.log(elem.textContent); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 7</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 8</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 9</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 10</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table>

来源

2017-01-12 08:31:49 Deep

jQuery从三个相同的表中选择第一个表中的所有行

回答

相关问题