我正在使用cheerio库抓取数据，这允许我在jQuery应用程序中使用node.JS选择器。
我正在抓取数据的网站包含三个表，所有这些表都具有相同的类名并且相同。
这些表中的表行（tr）的数量可能会有所不同。
下面是其中一个表格的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());
});
提前致谢！
答案 0 :(得分：1)
使用.first() jquery函数获取第一个表，然后在$(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>
答案 1 :(得分：1)
试试这样。
选择第一个表
$('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>