jQuery select 三个相同行中第一个 table 行的所有行

Question

我正在使用 cheerio 库抓取数据，它允许我在我的 node.JS 应用程序中使用 jQuery selector。我从中抓取数据的网站包含三个 table，所有这些 table 都具有相同的 class 名称并且完全相同。这些 table 中的 table 行 (tr) 的数量可能会有所不同。

下面是 table 之一的 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>

我想做的是 select 从第一个 table 开始的所有行 并最终将这些文本输出为 JSON.当所有这些 table 基本相同（相同的 class 名称）时，我将如何实现这一点？

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

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

提前致谢！

Answer 1

使用 .first() jquery 函数获取第一个 table 然后在 .each 函数中使用 $(this) 而不是 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>

Answer 2

这样试试。

select第一个table

$('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>

jQuery select 三个相同行中第一个 table 行的所有行

jQuery select all rows from the first table out of three identical ones

javascript

jquery

web-scraping

cheerio